我在使用基于 CSS 的导航时遇到了一些问题。由于某种原因,每个导航项之间有少量的填充(3px 左右),就在垂直线的右侧。另外,在 Firefox 中,白色 :hover 稍微偏移,当您将鼠标悬停在其上时,它看起来更像选项卡式导航。这是 jsfiddle:
https://jsfiddle.net/9m24tf4a/7/
顺便说一句,有没有一种简单的方法可以让垂直线占据 90% 的高度?
HTML:
<div id="header_nav">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
CSS:
#header_nav {
margin: 0px;
padding: 0px;
clear: both;
height: 36px;
background-color: #ccc;
border-top: 1px solid #b6b2a9;
border-bottom: 1px solid #b6b2a9;
}
#header_nav ul {
width: 1000px;
padding: 0px;
line-height: 36px;
margin: 0px 100px 0px 100px;
}
#header_nav ul li {
list-style-type: none;
display: inline-block;
font: 14px/36px 'Arial', sans-serif;
color: #555559;
height: 36px;
line-height: 36px;
padding: 0px;
margin: 0px;
width: auto;
border-right: 1px solid #b6b2a9;
}
#header_nav ul li:hover {
background-color: #fff;
width: auto;
}
#header_nav ul li a {
font: 14px/36px 'Arial', sans-serif;
color: #555559;
text-decoration: none;
line-height: 36px;
margin: 0 17px;
padding: 0px;
}
#header_nav ul li.first {
/* border-left: 1px solid #b6b2a9; */
/* margin-left: 0px; */
}
最佳答案
内联显示的 LI 元素会生成已知的填充。您可以使用 float: left,也可以将 font-size: 0 设置为 UL 元素,然后返回并将其设置回 LI 元素本身所需的 font-size。
这是字体大小为 0 的代码片段;到 UL 元素。
#header_nav {
margin: 0px;
padding: 0px;
clear: both;
height: 36px;
background-color: #ccc;
border-top: 1px solid #b6b2a9;
border-bottom: 1px solid #b6b2a9;
}
#header_nav ul {
width: 1000px;
padding: 0px;
line-height: 36px;
margin: 0px 100px 0px 100px;
font-size: 0;
}
#header_nav ul li {
list-style-type: none;
display: inline-block;
font: 14px/36px 'Arial', sans-serif;
color: #555559;
height: 36px;
line-height: 36px;
padding: 0px;
margin: 0px;
width: auto;
border-right: 1px solid #b6b2a9;
font-size: 16px;
}
#header_nav ul li:hover {
background-color: #fff;
width: auto;
}
#header_nav ul li a {
font: 14px/36px 'Arial', sans-serif;
color: #555559;
text-decoration: none;
line-height: 36px;
margin: 0 17px;
padding: 0px;
}
#header_nav ul li.first {
/* border-left: 1px solid #b6b2a9; */
/* margin-left: 0px; */
}
<div id="header_nav">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
关于html - 基于 CSS 的导航中的额外填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29861467/