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

Question

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

这是 an example jsfiddle of a menu not distributed跨越 ul。

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

Answer 1

另一种方法。这是我尝试在页面上均匀分布菜单时使用的东西。如果您有一个动态菜单会根据特定条件发生变化(例如只有当您以管理员身份登录时才会显示的管理页面)，那就太好了。

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

同样，未经测试，只是输入。