HTML列表项在内部有文本时会错位。

Question

I have the following code:

#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>

如您所见，由于元素内有文本，列表中的两个项目未对齐。只要删除文本，对齐就完美了。检查元素时我找不到任何问题。

我做错了什么？

- Sooraj

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>

- Turnip

Answer 2

浮动 <li> 左侧可以解决问题。

#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;
  float: left;
}

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

- StudioTime

---

Darren，我们不能在li中使用float:left，因为已经有display:inline-block了。我们应该选择一个而不是两个同时使用。 - Faisal Ramzan

Answer 3

你只需要在“li”中添加一行代码，保持其他代码（HTML和CSS）不变。只需将“float:left”添加到您的“li”元素中，就可以对齐它们。

- Sagar B

---

你也可以通过在你的li元素中添加"overflow:hidden"来实现。 - Sagar B

Answer 4

你应该在空的<li>&nbsp</li>中使用空格。我希望它能解决你的问题，并且浏览器会将其视为一个空格。请尝试一下，看看是否有效。

<div id="container">
<ul>
<li>test</li>
<li>&nbsp;</li>
<li>test</li>
<li>&nbsp;</li>
</ul>
</div>

- Faisal Ramzan

Answer 5

设置 max-height 或 height

例子

li{
    box-sizing: border-box;
    width: 25%;
    display: inline-block;
    border: 1px solid #ccc;
    list-style-type: none;
    min-height: 100px;
    margin: 0px;
    max-height://your wish// or height
}

- karthick