我用下面的代码获取我的导航hover
效果:当我将鼠标悬停他们移动li
元素fiddle link当我给他们一个内在边界时,为什么我的元素会移动?
。我怎样才能避免这种情况? 我试图给li
元素一个白色的边框,但是现在元素不再是垂直居中了。
我用下面的代码获取我的导航hover
效果:当我将鼠标悬停他们移动li
元素fiddle link当我给他们一个内在边界时,为什么我的元素会移动?
。我怎样才能避免这种情况? 我试图给li
元素一个白色的边框,但是现在元素不再是垂直居中了。
在li
标记中使用透明边框。
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 1em;
height: 90px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 8px solid rgba(0, 0, 0,0);
}
nav li:not(:last-child) {
margin: 0px 40px 0px 0px;
}
nav ul li:hover {
border-color: rgb(109, 155, 166);
cursor: pointer;
}
nav ul li a {
text-decoration: none;
color: rgb(62, 74, 89);
height: 100%;
display: block;
}
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
display: flex;
justify-content: space-between;
align-items: center;
}
<header>
<img src="images/logo.png" alt="BW">
<nav>
<ul>
<li><a href="google.de">Start</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Pakete</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
添加悬停改变边界为元素的内容,所以你应该为你提供的css丝毫透明边框时不叮无缝的
nav ul li {
border-top:8px solid transparent;
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 1em;
height: 90px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
很明显,他们在移动。首先你没有边框,所以它们在顶部,当你将它悬停时,你有一个8px的边框,所以它们向下运行8px。
该解决方案很简单。您必须在开始时向您的li添加透明边框。
nav ul li {
border-top: 8px solid rgba(0, 0, 0,0);
}
或
nav ul li {
border-top: 8px transparent;
}
这两种解决方案是可能的,但不是每一个(旧)浏览器接受的透明标签。
你可以试试这个代码...
nav ul li {
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 1em;
height: 90px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
nav ul li:hover::before {
/* border-top: 8px solid rgb(109, 155, 166); */
content: "";
display: inline-block;
width: 50px;
height: 8px;
position: absolute;
top: 0;
background-color: rgb(109, 155, 166);
}
使用透明边框https://jsfiddle.net/hkh82ot6/2/ –