如何在无序列表中均匀分发HTML列表项

I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul element to the right edge?

我希望形成水平菜单的li元素在我的ul元素的宽度上均匀分布。我通常将我的li元素浮动到左边并添加一些边距。但是我如何放置适当的间距使它们从我的ul元素的左边延伸到右边缘？

Here's an example jsfiddle of a menu not distributed across the ul.

这是一个没有分布在ul上的菜单的示例。

The spacing has to be the same between each li. But the li elements may be different lengths.

每个li之间的间距必须相同。但是li元素可以是不同的长度。

4 个解决方案

#1

Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).

还有另一种方法。这是我在尝试在页面上均匀地跨菜单时使用的内容。如果您的动态菜单会根据特定条件发生变化（例如，如果您以管理员身份登录，则只会显示一个管理页面），这很好。

CSS:

CSS：

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu

我有点懒，只是从我当前的项目中复制了这个，所以你必须调整它以适应你的代码，但这是我创建水平菜单的首选方法

EDIT: You can make it look like it spans better by adding this:

编辑：通过添加以下内容，您可以使其看起来更好：

CSS:

CSS：

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

again, untested, just typed.

再次，未经测试，只是输入。

#2

You'll need to set the width of the li elements to force them to fill the space:

您需要设置li元素的宽度以强制它们填充空间：

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

(Fiddle demo)

（小提琴演示）

If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.

如果您向列表中添加更多项目，则需要调整百分比宽度 - 例如，使用四个项目，宽度将为25％。

#3

I have two answers for you.

我有两个答案。

If you want to stick with the float model:

如果你想坚持使用浮动模型：

Your ul element needs to have the overflow property set (without this property, your ul (or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul/li and body, the background of your ul will not seem to display).

你的ul元素需要设置overflow属性（没有这个属性，你的ul（或任何包含浮动元素的元素）没有给出高度（这是预期的行为，请注意：http：//www.quirksmode.org/css /clearing.html）因此默认为0的高度 - 这样做的效果是，如果你为ul / li和body设置不同的背景颜色，你的ul的背景似乎不会显示）。

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

Your li elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.

你的li元素需要设置宽度，否则 - 作为浮动元素 - 它们的宽度将设置为它们包含的任何宽度。我在下面使用了像素，但你也可以使用百分比值。

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

Use the display:inline-block property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li> and <li> tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.

对li元素使用display：inline-block属性（如果不支持旧浏览器）。 IE 7不支持这一点，所以如果你需要广泛的跨浏览器支持它没有用，但是它会产生你想要的效果 - 尽管确保你删除 和

标签之间的任何空格，否则它们将计入总宽度，并将显示为元素之间的空格。

标签之间的任何空格，否则它们将计入总宽度，并将显示为元素之间的空格。

One advantage that this method has is that you don't have to know or set the width of the container ul if you use percentage widths on your contained li elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.

这种方法的一个优点是，如果在包含的li元素上使用百分比宽度，则不必知道或设置容器的宽度，您仍然可以使用已有的text-align属性免费居中。这使您的布局非常敏感。

Here's markup and CSS that works the way I think you are requesting:

这里的标记和CSS按我认为你要求的方式工作：

Markup:

标记：

<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>

CSS:

CSS：

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}

• If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your li elements in the CSS.
• 如果您希望将标记保留在多行上，那么您将不得不在CSS中调整li元素的左右边距。
• If you add li elements, you'll have to change the percentage width to match (for example, with four li elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
• 如果添加li元素，则必须更改百分比宽度以匹配（例如，在标记中使用四个li元素，您需要将CSS更改为每个的宽度为25％）。

#4

I don't get your question clearly so I assumed that you might want this:

我不明白你的问题所以我认为你可能想要这个：

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}