21

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

这是一个未分布在ul.

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

4

5 回答 5

45

还有另一种方法。这是我尝试在页面上均匀地跨越菜单时使用的东西。如果您有一个动态菜单，该菜单会根据某些条件发生变化（例如仅当您以管理员身份登录时才会显示的管理页面），那就太好了。

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

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

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

CSS：

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

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

于 2012-11-14T19:09:08.020 回答
2

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

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

（小提琴演示）

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

于 2012-11-12T10:15:28.090 回答
1

我有两个答案给你。

如果你想坚持float模型：

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

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

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

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

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

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

这是我认为您要求的标记和CSS：

标记：

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

CSS：

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}
  • li如果您希望将标记保留在多行上，那么您将不得不在 CSS 中调整元素的左右边距。
  • 如果添加li元素，则必须更改百分比宽度以匹配（例如，li标记中有四个元素，您需要将 CSS 更改为每个元素的宽度为 25%）。
于 2012-11-14T19:02:43.687 回答
1

html:

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

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

密码笔

于 2019-05-18T13:52:33.973 回答
0

我没有清楚地得到你的问题，所以我假设你可能想要这个：

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}
于 2012-11-12T10:08:37.430 回答