无序列表样式：方框

Question

我有一个无序列表，其中列表项是水平显示的。每个列表项应包含一些文本和图像。当我向它们添加内容时，列表项不再对齐。

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

Jsbin：https://jsbin.com/fobopayaco/edit?html,css,output

我该如何修复这个问题？是可以添加一些CSS样式吗？还是需要更改我的标记代码？

- Joe

Answer 1

您可以将vertical-align设置为top，例如。

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

- Nenad Vracar

Answer 2

通过添加文本，您可以看到默认的vertical-align属性的效果：您的列表项被对齐到基线上。

如果您希望它们都对齐在同一位置，请为它们指定一个vertical-align属性。

li{
  border:1px solid blue;
  display:inline-block;
  height:100px;
  vertical-align: top;
  width:100px;
}

- ajm

Answer 3

列表不喜欢空项。如果由于某种原因需要一个项目为空，请使用<li>&nbsp;</li>，否则一旦您向所有项目添加内容，正常情况将恢复。

- SunKnight0

Answer 4

尝试在li上使用float:left而不是display:inline-block。

- pix1289

Answer 5

或者你可以对每个 <li> 使用 float 属性来进行左浮动

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
  float: left;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

- pes502

Answer 6

你可以在你的CSS中添加float:left或display:inline

    li{
      border:1px solid blue;
      display:inline-block;
      height:100px;
      width:100px;  
     display:inline;
    }

这里是可工作的代码片段

https://jsfiddle.net/5dh2ak3a/

- jitendra varshney