好吧,我一直在尝试找到最佳方法,以便为不同数量的菜单项水平均匀地分隔li菜单项 . 我发现将text-align:justify应用于包含div,显示:内联到ul,显示:inline-block到li,并在ul之后添加span,宽度为:100%,display:inline-block ,height:0将产生所需的效果 . 然而,ul下有很多莫名其妙的额外空间 . 经过几个小时的头痛,我发现它只出现在一个带有HTML 5 Doctype的html文件中 . 如果它具有旧的XHTML Transitional Doctype,则它会完全按预期显示 . 我的问题是,为什么这里有额外的空间,我该如何摆脱它呢?
这是我一直在玩的标记:
body{
margin:0;
padding:0;
}
.nav{
width:900px;
margin:0 auto;
position:relative;
text-align:justify;
background-color:#666;
font-family:Arial, Helvetica, sans-serif;
}
.nav ul{
display:inline;
width:100%;
padding:0;
margin:0;
list-style:none;
}
.nav li{
display:inline-block;
font-size:1.2em;
}
.nav li a{
display:inline-block;
color:#FFF;
text-decoration:none;
padding:10px;
}
span{
display: inline-block;
width: 100%;
height: 0;
color:#F00;
}
<div class="nav">
<ul>
<li> <a href="">texttexttext</a></li>
<li> <a href="">tex</a> </li>
<li> <a href="">texttext</a> </li>
<li> <a href="">text</a> </li>
<li> <a href="">text</a> </li>
<li> <a href="">texttexttext</a> </li>
<li> <a href="">texttexttext</a> </li>
<li> <a href="">texttext</a> </li>
</ul>
<span></span>
</div>
4 回答
你试过了吗:
代替:
将
line-height:0
添加到带有类nav的div,将line-height:1.2
添加到ul,将vertical-align:top
添加到span .还要考虑用
.nav:after
伪元素替换span .像这样:http://jsfiddle.net/frhxS/13/
更改背后的原则是消除strut对两个线框的影响 . 使用XHTML 1.0 Transitional doctype或HTML 4.01 Transitional doctype时,strut对行框的高度没有影响,但当与HTML5 doctype或XHTML 1.0 Strict或HTML 4.01 Strict一起使用时,它确实为行框设置了最小高度文档类型 .
尝试将li的width属性设置为12%并删除span元素 .
和
.nav{ white-space:nowrap; }
不是white-space:no-wrap
. 这将解决您的问题