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：

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 2

浮动<li>左侧解决了问题

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您应该在空<li>&nbsp</li>中使用空格。我希望它能解决你的问题。并且浏览器会将其视为空间。如果有效，请试着告诉我。

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

Answer 4

设置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
}

Answer 5

你必须在“li”中为你的css添加一行，保留其他代码（html和css）未触动过。只需将“float：left”添加到“li”中元素，就是这样。这样他们就会对齐

当文本内部时，HTML列表项未对齐

5 个答案: