首页 文章

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

提问于
浏览
3

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

4 回答

  • 0

    你试过了吗:

    .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; 
     }
    
  • 0

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

  • 0

    尝试将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>
    
  • 1

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

相关问题