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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (25)

我希望我的li元素能够形成水平菜单,并在我的ul元素宽度上均匀分布。我通常将float我的li元素放在左侧并添加一些边距。但是,我如何设置合适的间距,使它们从ul元素的左侧延伸到右侧?

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

提问于
用户回答回答于

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

用户回答回答于

需要设置li元素的宽度,以强制它们填充空格:

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

扫码关注云+社区