Question

好的，我一直在尝试找到一种最佳方法，可以为不同数量的菜单项水平均匀地分隔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>

jsfiddle

Answer 1

将line-height:0添加到带有类导航的div，将line-height:1.2添加到ul，将vertical-align:top添加到范围。

还要考虑用.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一起使用时，它确实为行框设置了最小高度文档类型。

Answer 2

你试过了吗？

 .nav ul{
    display:inline;
    width:100%;
    padding:0;
    margin:0;
    list-style:none; 
 }

而不是：

 .nav>ul{
    display:inline;
    width:100%;
    padding:0;
    margin:0;
    list-style:none; 
 }

Answer 3

尝试将li的width属性设置为12％并删除span元素。

body{
        margin:0;
        padding:0;  
    }
    .nav{
        width:900px;
        margin:0 auto;
        position:relative;
        text-align:justify;
        background-color:#666;
        white-space:no-wrap;
        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;
    width: 12%;
    text-align:center;
 }
     .nav li a{
        display:inline-block;
        color:#FFF;
        text-decoration:none;
        padding:10px;
     }

和

<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>
</div>

Answer 4

.nav{ white-space:nowrap; }不是white-space:no-wrap。这将解决您的问题

HTML 5 Doctype为对齐的水平无序列表菜单创建额外空间

4 个答案: