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

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

我有一个导航列表,其中列表项设置为内联块.项目数是列表是动态的,因此可能会有所不同.

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

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

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

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

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

编辑：稍微分开,但为什么在我的第二个例子中lis下面有一个空格,请说明我将line-height和font-size设置为0的事实？

解决方法

它现在是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>

预编辑fiddle(现在内联在上面的代码段)

原文地址：https://www.jb51.cc/css/215706.html