html – 如何使所有列表项扩展到容器的整个宽度

发布时间：2020-12-14 19:45:47 所属栏目：资源来源：网络整理

导读：我试图创建一个响应的导航,但我无法获得菜单项相对于容器伸展自己. 什么是最有效的现代方法,使所有元素自动适合容器的整个宽度？ http://jsfiddle.net/4dxkk5wr/1/ 最佳答案我会使用CSS表如下. 对于ul,使用display：table并将边距和填充置零,并将宽度设置为

我试图创建一个响应的导航,但我无法获得菜单项相对于容器伸展自己.

什么是最有效的现代方法,使所有元素自动适合容器的整个宽度？

 
http://jsfiddle.net/4dxkk5wr/1/


最佳答案
我会使用CSS表如下.
对于ul,使用display：table并将边距和填充置零,并将宽度设置为100％.
对于ul li,请使用display：table-cell.
表格单元格将以合理的方式将自身调整为父级的宽度,同时考虑链接文本/标签的宽度.
注意：我假设您希望链接是内联的,以便所有链接都填满宽度,而不是单个链接占据宽度的100％.否则,更改display：inline-block to display：block for li elements,但由于这太明显了,我假设你想要一个水平布局.

nav {
  border: solid 1px #000;
  width: 700px;
}
ul {
  width: 100%;
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
}
ul li {
  padding: 25px;
  display: table-cell;
  background: #000;
  color: #fff;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!