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

How to distribute HTML list items evenly in an unordered list

提问by at.

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

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

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

这是一个不分布在ul.

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

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

回答by FireCrakcer37

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.

再次，未经测试，只是打字。

回答by whostolemyhat

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%。

回答by Matt Wagner

I have two answers for you.

我有两个答案给你。

If you want to stick with the floatmodel:

如果你想坚持float模型：

Your ulelement 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/liand body, the background of your ulwill not seem to display).

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

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

Your lielements 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-blockproperty 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.

display:inline-block为您的 li 元素使用该属性（如果对旧浏览器的支持不是优先事项）。IE 7 不支持此功能，因此如果您需要广泛的跨浏览器支持，它没有用，但它会创建您想要的效果 - 尽管确保随后删除您的</li>和<li>标签之间的任何空格，否则它们将计入总宽度并将显示为元素之间的空格。

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

这种方法的一个优点是，ul如果您在包含的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 lielements in the CSS.
• If you add lielements, you'll have to change the percentage width to match (for example, with four lielements in your markup, you'd need to change your CSS to have a width of 25% for each one).

• 如果您希望将标记保留在多行上，那么您将不得不摆弄liCSS 中元素的左右边距。
• 如果添加li元素，则必须更改百分比宽度以匹配（例如，li标记中有四个元素，您需要将 CSS 更改为每个元素的宽度为 25%）。

回答by Wilf

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;
}

回答by olly

Html:

网址：

 <ul>
    <li>1</li>
    <li>2 <br>4</li>
    <li>3</li>
</ul>

Css:

css：

ul {
    list-style: none;
    font-size: 0;
    text-align: justify;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    font-size: 100px;
    display: inline-block;
}

codepen

代码笔