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

Question

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

这是一个没有分布在菜单上的菜单的示例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;
}

再次,未经测试,只是输入.