0

我的页面顶部有一个导航栏，链接是水平布局的。每当我尝试使链接成为整个 li 的大小时，它最终都会将所有链接放在彼此之上。我试图将 a 标签设置为 display: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;}
4

2 回答 2

0

我遇到了同样的问题，当我尝试在 nag 中放置 6 个链接时，下降到 5 个链接并且它的格式很好。不知道这是否是一个选项，但尝试一下......

于 2013-10-02T23:40:38.837 回答
0

见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为块元素，它将被呈现为一个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）设置为包含浮动元素的包装器。

于 2012-08-17T23:58:02.113 回答