Question

我的页面顶部有一个导航栏，链接是水平布局的。每当我尝试将链接设置为整个li的大小时，它最终会将所有链接放在彼此的顶部。我试着将一个标签设置成样式：block; 100％宽度，但它搞砸了。这是我的代码，任何人都可以帮助我吗？

    <div class="container">
        <ul id="top">   
            <li class="nav"><a href="#">Home</a></li>
            <li class="nav"><a href="#">Forum</a></li>
            <li class="nav"><a href="#">Play Now</a></li>
            <li class="nav"><a href="#">Download</a></li>
            <li class="nav"><a href="#">Hiscores</a></li>
            <li class="nav"><a href="#">Shop</a></li>
            <li class="nav"><a href="#">Vote</a></li>
        </ul>
    </div>

    .container {width:100%;}
    #top {list-style:none;padding:5px;background:#E8E1A5;}
    #top a {text-decoration:none;color:#1D486F;margin:0px;width:100%;}
    #top .nav {display:inline;border-right:1px solid black;width:100px;padding:5px 20px;}

Answer 1

请参阅http://jsfiddle.net/wYEJY/

您可以尝试将width:100px设置为#top a。但锚点是内联元素，因此您必须设置display:inline-block。然后，将display:inline-block设置为#top .nav，以便最小化其宽度并使其水平放置。

所以添加以下代码：

#top a {width:100px;display:inline-block;}
#top .nav {display:inline-block;}

您也可以使用

#top a {display:block;}
#top .nav {display:inline-block;width:100px;}

但这不适用于IE 7，因为如果将display:inline-block设置为ablock元素，则会将其呈现为block元素。

另一种选择：浮动元素

#top{overflow:hidden;}
#top a {width:100px;display:block;}
#top .nav{float:left}

您可以在此处查看所有可能性：http://jsfiddle.net/wYEJY/1/

但请记住，如果您有内联元素，则无法向其添加width属性;你应该把它改成inline-block。

如果您决定使用浮动元素，请记得添加

<div style="clear:both"></div>

之后，或者将overflow:hidden（或不同于visible的内容）设置为包含浮动元素的包装器。

Answer 2

我有同样的问题，当我试图在唠叨中放入6个链接时，下拉到5个链接并且格式正常。不知道这是一个选项，但尝试一下......

如何使链接与<li>水平</li>的宽度相同

2 个答案: