我有一个水平的无序列表,包含3个项目。列表项的大小和宽度都是固定的。
当所有三个<li>
元素都有内容时,一切都按预期工作。
当所有三个都为空时,一切都按预期工作。
当一个或两个项目为空但其他项目有内容时,垂直间距会中断。
li {
display: inline-block;
padding: 10px 20px;
height: 40px;
width: 100px;
box-sizing: border-box;
border-style: solid;
border-color: black;
border-width: 2px;
text-align: center;
}
<ul>
<li></li>
<li>foo</li>
<li>bar</li>
</ul>
我有两个问题。
首先,这里发生了什么,为什么?我的印象是,因为<li>
是固定大小的,所以内部是否有任何内容都无关紧要。
其次,我该如何解决?显而易见的方法是向空
添加<li>
,但这不是很优雅。
我在OSX 10.11.4上运行Chrome 53.0.2785.113。
答案 0 :(得分:0)
这是因为CSS中的“基线”垂直对齐。
以下是another answer的说明。
因为内联块的默认对齐方式是“基线”, 除非被覆盖,否则此规则适用。当文本被放入 在内联块中,该文本将为内联块创建基线 第一个(非粗体)句子适用。
您可以通过向vertical-align: top;
添加<li>
来解决此问题。
<强> CSS
li {
vertical-align: top;
}
li {
display: inline-block;
padding: 10px 20px;
height: 40px;
width: 100px;
box-sizing: border-box;
border-style: solid;
border-color: black;
border-width: 2px;
text-align: center;
vertical-align: top;
}
<ul>
<li></li>
<li>foo</li>
<li>bar</li>
</ul>