我的 CSS 中有一个小设计问题,我想知道是否有人可以帮我检查一下。设计问题在于我的水平导航的翻转效果。似乎有某种添加的边距或填充,但我在 css 中找不到问题。我将在下面粘贴我正在使用的代码,以便您自己查看。在鼠标悬停导航列表项之前,您将无法看到问题。
HTML:
<div class="Horiznav">
<ul>
<li id="active"><a href="#">Link #1</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>
</ul>
</div>
CSS:
.Horiznav {
background: #1F00CA;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
display: inline;
}
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
background: #16008D;
color: #fff;
}
#active a { border-left: 1px solid #fff; }
最佳答案
由于您有 li
元素 display:inline
问题(每个菜单/列表项左侧的额外间隙)是由于空白造成的在 HTML 标记中。您可以:
A - 删除 HTML 中的空白:
<ul><li id="active"><a href="#">Link #1</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></ul>
B - 或者,使用 font-size:0
技巧:
在 ul
容器上设置 font-size:0
并在 li< 上使用
子元素:font-size:whatever
覆盖它
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
font-size: 0; /* #1 */
}
.Horiznav ul li {
display: inline;
font-size: 16px; /* #2 */
}
C - 或者,使用 float 布局:
float li
元素(然后它们隐式显示为 block )并使用 overflow:hidden
清除 ul
容器上的 float 。但是,如果您希望容器居中,则需要指定容器宽度并应用 margin:0 auto
。
关于html - 列表项之间不需要的边距或填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13505841/