Question

我正在制作商业公司网站，页面顶部有一个菜单栏。现在这个菜单栏包含四个li标签（代码下方），这些li标签位于页面左侧。我想让它分配水平。救命啊！

<div id="wrapper-menu">
<div id="menu">
    <ul>
        <li><a href="">home</a></li>
     <li><a href="">about us</a></li>
     <li><a href="">news</a></li>
     <li><a href="">contact us</a></li>
     <li><a href="">links</a></li>
    </ul>
 </div>
   </div>

Answer 1

我假设没有其他例子，你的问题是你希望它们是水平的而不是垂直的（你说它们都在左边）。如果这不是问题，那么这个答案将不适用。

您可能需要在css中使用以下内容：

li {display: inline-block;}

您可能想要查找内联块的确切内容，但简而言之，这意味着块不是屏幕的整个宽度，而是足够宽，块就像内联元素一样意味着您不会启动新行与每一个。

你当然希望进一步的造型让它看起来不错，但这应该是我认为的伎俩。

http://jsfiddle.net/NqgZ4/表示jsfiddle示例。

作为评论的后续内容，将它们展开，最简单的方法是为它们应用宽度。

li 
{
    display: inline-block;
    width: 19%;
}

请注意，我使用19％而不是20％来避免可能导致宽度超过像素的舍入问题（例如，如果可用宽度为999像素，则20％将使每个像素为200像素，然后加起来太多了。）

如果你有一个动态数量的菜单项，那么它有点棘手，我开始考虑一些脚本来均衡它们（通过动态设置宽度）虽然可能有一个纯CSS方法可以使用可变数量的项目。

更新了小提琴：http://jsfiddle.net/NqgZ4/1/

Answer 2

你需要制作li内联块项目，不要忘记将文本对齐应用于ul：

li {
    display: inline-block;
}
ul {
    text-align: center;
}

这里的例子：

http://jsfiddle.net/evmDv/

无序列表不在中心

2 个答案: