好的,这实际上有点复杂.
我有一个导航列表,其中列表项设置为内联块.项目数是列表是动态的,因此可能会有所不同.
我的目标是让列表项跨越容器的整个宽度. (例如,如果有4个列表项,每个列表项占据容器宽度的25％[忽略边距/填充等])
还有一个复杂的问题是,浏览器似乎在内联块元素中添加了4px的余量,它们之间有空格(换行符/空格等).
我做了一个小提琴作为一个起点,有两个例子：第一个是内联块模式中的列表项,第二个证明它们在宽度上对齐.
既没有实现我想要的东西,整个宽度被元素占据而没有它们分成另一条线.
编辑：稍微分开,但为什么在我的第二个例子中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>
