Hyperlink 如何使链接的宽度与<；李>；横向

我的页面顶部有一个导航栏，链接是水平排列的。每当我尝试将链接设置为整个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;}

.container{宽度：100%；}
#顶部{列表样式：无；填充：5px；背景：#E8E1A5；}
#顶部a{文本装饰：无；颜色：#1D486F；边距：0px；宽度：100%；}
#top.nav{显示：内联；右边框：1px纯黑色；宽度：100px；填充：5px 20px；}

请参见

您可以尝试将

宽度：100px

设置为

#顶部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;}

但这在IE7上不起作用，因为如果将

display:inline block

设置为一个lock元素，它将作为

block

元素呈现

另一种选择：浮动元素

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

您可以在此处看到所有可能性：

但请记住，如果您有一个内联元素，则不能向其添加

width

属性；您应该将其更改为

内联块

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

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

---

在它们之后，或者将

溢出：隐藏
（或者与
可见
不同的东西）设置到包含浮动元素的包装上。
我也遇到了同样的问题，当我尝试在nag中放置6个链接时，下降到5个链接，并且格式良好。不知道这是否是一个选项，但尝试一下