0

我正在制作商业公司网站，页面顶部有一个菜单栏。现在这个菜单栏包含四个 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>
4

2 回答 2

0

我假设没有其他示例，您的问题是您希望它们是水平的而不是垂直的（您说它们都在左侧）。如果这不是问题，则此答案将不适用。

您可能希望在您的 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/

于 2013-04-29T08:49:50.657 回答
0

您需要制作 li 内联块项目，并且不要忘记对 ul 应用文本对齐：

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

这里的例子：

http://jsfiddle.net/evmDv/

于 2013-04-29T08:52:57.693 回答