Html 列表项之间不需要的边距或填充
我的css有一个小的设计问题,我想知道是否有人能帮我检查一下。设计问题在于水平导航的滚动效果。似乎有一些额外的边距或填充,但我在css中找不到问题。我将在下面粘贴我正在使用的代码,以便您可以自己查看。在滚动浏览导航列表项之前,您将无法看到问题 HTML:Html 列表项之间不需要的边距或填充,html,css,Html,Css,我的css有一个小的设计问题,我想知道是否有人能帮我检查一下。设计问题在于水平导航的滚动效果。似乎有一些额外的边距或填充,但我在css中找不到问题。我将在下面粘贴我正在使用的代码,以便您可以自己查看。在滚动浏览导航列表项之前,您将无法看到问题 HTML: <div class="Horiznav"> <ul> <li id="active"><a href="#">Link #1</a></li>
<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>
.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; }
只需在css的“Horiznav ul li a”中添加“display:inline block”
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
display:inline-block;
}
这是你的电话号码
希望这能解决您的问题。因为您有
li
元素display:inline
问题(每个菜单/列表项左侧的额外间隙)是由于HTML标记中的空白造成的。您可以:
A-清除HTML中的空白:
C-或,使用浮动布局:
浮动li
元素(它们随后隐式显示为块),并使用溢出:隐藏清除ul
容器上的浮动。但是,如果您希望容器居中,则需要指定容器宽度并应用边距:0 auto
看起来不错。。。问题出在哪里@dbaseman:“问题”似乎是第二个菜单项和后续菜单项左侧的额外“间隙”。间隙一直存在,只是当你悬停在锚上时,它变得更加明显,因为背景颜色已经改变了。原因是内联元素和标记中的空白。这似乎解决不了任何问题?事实上,由于边距(填充)不再塌陷,这会在顶部和底部产生额外的“间隙”。很抱歉发表评论。。那么你的档案在我这边看起来不错
<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>
.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 */
}