css使内联块元素跨越容器的整个宽度

Question

好的,这实际上有点复杂.

我有一个列表项目设置的导航列表inline-block.项目数是列表是动态的,因此可能会有所不同.

我的目标是让列表项跨越容器的整个宽度.(例如,如果有4个列表项,每个列表项占据容器宽度的25%[忽略边距/填充等])

还有一个复杂的问题是,浏览器似乎为内联块元素添加了4px的余量,其中它们之间有空格(换行符/空格等).

我做了一个小提琴作为起点,有两个例子:第一个是内联块模式中的列表项,第二个证明它们在宽度上对齐.

既没有实现我想要的东西,整个宽度被元素占据而没有它们分成另一条线.

http://jsfiddle.net/4K4cU/2/

编辑:稍微分开,但为什么在我的第二个例子中lis 下方有一个空格,请注意我将行高和字体大小设置为0的事实？

Answer 1

好吧,尽管有许多不错的答案和我的初步想法,js/jquery是唯一的出路,实际上是一个很好的仅css解决方案:使用表格单元格.@ Pumbaa80的原始建议

.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
.list>li {
    display: table-cell;
    border:1px green solid;
    padding:5px;
    text-align: center;
}
.container {
    border: 1px #777 solid;
}

<div class="container">
    <ul class="list">
        <li>text</li>
        <li>text</li>
        <li>some longer text</li>
        <li>text</li>
    </ul>
</div>

这优于其他解决方案:

• CSS-只
• 与内联块一样没有4px余量问题
• 没有clearfix需要浮动元素
• 保持均匀分布的宽度,与li内容无关
• 简洁的CSS

在这里小提琴:http://jsfiddle.net/rQhfC/

Answer 2

它现在是2016年,我想用flexbox回答这个问题.有关浏览器兼容性,请咨询CanIUse.

/* Important styles */
ul {
  display: flex;
}
li {
  flex: 1 1 100%;
  text-align: center;
}

/* Optional demo styles */
* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 2em;
  justify-content: space-around;
  list-style: none;
  font-family: Verdana, sans-serif;
}
li {
  padding: 1em 0;
  align-items: center;
  background-color: cornflowerblue;
  color: #fff;
}
li:nth-child(even) {
  background-color: #9980FA;
}

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

预编辑小提琴(现在在上面的片段中内联)