基于CSS的导航中的额外填充

时间:2015-04-25 05:40:35

标签: html css

我遇到了一些基于CSS导航的问题。出于某种原因,每个导航项之间只有少量填充(3px左右),就在垂直线的右侧。另外,在firefox中,白色:悬停略微偏移,当你将鼠标悬停在它上面时,它看起来更像是标签导航。这是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; */
}

2 个答案:

答案 0 :(得分:2)

由内联显示的LI元素生成的已知填充。您可以使用float:left,将font-size:0设置为UL元素,然后返回并将其设置回LI元素本身所需的字体大小。

这里是使用font-size:0的代码段;到UL元素。

&#13;
&#13;
#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; */
}
&#13;
	<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以尝试使用&#34; float: left&#34;而不是&#34; display: inline-block&#34;如果你对它感到满意:

#header_nav ul li {
    ...
    float: left;
    ...
}