当文本内部时,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>