水平列表中的空<li>会打破垂直间距

时间:2016-09-15 16:49:52

标签: html css

我有一个水平的无序列表,包含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>是固定大小的,所以内部是否有任何内容都无关紧要。

其次,我该如何解决?显而易见的方法是向空&nbsp;添加<li>,但这不是很优雅。

我在OSX 10.11.4上运行Chrome 53.0.2785.113。

1 个答案:

答案 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>