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 回答