列表项不会彼此相邻出现

Question

我有一个问题，我似乎找不到解决方案。

我正在制作一个 drupal 站点，我想让这些列表项彼此相邻。它们的宽度是 45%，所以应该可以让 2 个相邻，但我不知道怎么做。

我试过在多个 UL 和 LI 上放置内联显示和内联块，但没有任何变化。

我该怎么办？

Answer 1

只需使用浮点数：

ul {
  width: 940px;
}
li {
  margin: 6px;
  float: left;
  list-style: none;
}
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

<ul>
  <li>
    <img src="//lorempicsum.com/futurama/450/200/2" alt="" />
  </li>
  <li>
    <img src="//lorempicsum.com/futurama/450/200/2" alt="" />
  </li>
  <li>
    <img src="//lorempicsum.com/futurama/450/200/2" alt="" />
  </li>
  <li class="clearfix">
    <img src="//lorempicsum.com/futurama/450/200/2" alt="" />
  </li>
</ul>

Answer 2

如果您不提供任何代码，很难找出您做错了什么。

我的猜测是您没有更改显示类型，因此元素仍然是块。如果是这样，那么无论宽度如何设置都没有关系，每个元素都将保留在它自己的行上。

如果您想要并排显示列表项，请使用 float 或 display:inline;

请参阅 this fiddle 了解不同方法的示例以及为什么有些方法不起作用。

列表项不会彼此相邻出现

List items won't appear next to eachother

css

html-lists

css-float