当里面有文本时，HTML 列表项会错位

Question

我有以下代码:

#container {
  position: fixed;
  right: 0px;
  width: 400px;
  background: #f1f1f1;
  height: 100vh;
}
ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
li {
  box-sizing: border-box;
  width: 25%;
  display: inline-block;
  border: 1px solid #ccc;
  list-style-type: none;
  min-height: 100px;
  margin: 0px;
}

<div id="container">
   <ul>
      <li>test</li><li></li><li>test</li><li></li>
   </ul>
</div>

如您所见，两个列表项未对齐，因为元素中有文本。每当删除文本时，对齐都是完美的。检查元素时我没有发现任何错误。

我做错了什么？

Answer 1

文本正在改变元素的基线。为您的 li 设置 vertical-align top、middle 或 bottom:

#container {
  position: fixed;
  right: 0px;
  width: 400px;
  background: #f1f1f1;
  height: 100vh;
}
ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
li {
  box-sizing: border-box;
  width: 25%;
  display: inline-block;
  border: 1px solid #ccc;
  list-style-type: none;
  min-height: 100px;
  margin: 0px;
  vertical-align: top; /* or middle or bottom */
}

<div id="container">
<ul>
<li>test</li><li></li><li>test</li><li></li>
</ul>
</div>