CSS水平列表/带有不需要的底部填充的导航
CSS水平列表/带有不需要的底部填充的导航
提问于 2013-06-11 06:02:13
试图摆脱导航项目下的一些奇怪的底部填充，这是由navigation .span风格引起的(正是这种风格让事情变得正常，所以我无法摆脱它)。我希望导航项目与顶部和底部齐平。
我已经使用这个编码器很长时间了，我想这要么是我第一次注意到填充，要么就是我只是把它扫到地毯下。
在这里拉小提琴http://jsfiddle.net/arminvit/B2sAn/
快速查看以下代码：
CSS
/* NAVIGATION */
.navigation {
width:100%;
clear:both;
float:left;
text-align:justify;
padding:0;
margin:0;
}
.navigation * {
display: inline;
margin:0;
padding:0;
}
.navigation ul {
list-style-type: none;
margin:0;
padding:0;
}
.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
white-space:nowrap;
}
.navigation span {
display: inline-block;
position: relative;
width: 100%;
height:0;
margin:0;
padding:0;
}HTML
<div class="navigation">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span></span>
</div><!--END navigation-->回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-11 06:29:17
不太确定你想要什么，但似乎是一种混合或遗留的不同方法。因此，如果你想要文本对齐对齐你的链接，放弃所有关于浮动的东西。
http://jsfiddle.net/69LjY/
一些值得阅读的内容：http://www.barrelny.com/blog/text-align-justify-and-rwd/
/* NAVIGATION */
.navigation {
width:100%;
text-align:justify;
padding:0;
margin:0;
}
.navigation ul {
list-style-type: none;
margin:0;
padding:0;
line-height:0;
}
.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
display:inline-block;
line-height:1.2em;
}
.navigation ul:after {content:'';padding-right:2700px;}/* line-height 0 + this avoid gaps under , padding , use widest screen width you like*/Stack Overflow用户
发布于 2013-06-11 06:32:23
我给你的Fiddle添加了另一个导航栏，里面有一些CSS类和标记，我想，这会给你带来你想要的效果。(CSS如下)
.test_nav{
background:orange;
}
.test_nav_bar{
list-style-type: none;
}
.test_nav_bar li{
display: inline-block;
background: gray;
margin-left:50px;
padding: 5px;
}显然，你应该玩弄一下间距等等。
希望这能有所帮助！
Stack Overflow用户
发布于 2013-06-11 06:20:39
从.navigation span中删除display: inline-block;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17033573
复制相关文章
相似问题
腾讯云开发者
