Question

我想将多个<ul>放在同一行，模拟商店中的商品。到目前为止，我有多个无序列表标签：

ul {
  display: inline;
}
li {
  list-style: none;
}

<ul>
  <li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
  <li>Name</li>
  <li>Author</li>
</ul>
<ul>
  <li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
  <li>Name</li>
  <li>Author</li>
</ul>

我怎样才能做到这一点？我让他们垂直显示，但我不希望他们这样。

Answer 1

您可以将其设置为ul {display:inline-block;}。

请注意示例中图片上的width="20%" height="20%"，这可能会给您带来不必要的结果。百分比宽度或高度始终相对于容器的宽度，而不是其本身。

为简单起见，我只是在下面的演示中使用固定宽度。

ul {
  display: inline-block;
  vertical-align: top;
  padding-left: 0;
}
li {
  list-style: none;
}

<ul>
  <li><img src="//dummyimage.com/100"></li>
  <li>Name</li>
  <li>Author</li>
</ul>
<ul>
  <li><img src="//dummyimage.com/100"></li>
  <li>Name</li>
  <li>Author</li>
</ul>

Answer 2

使用CSS：

li{
  float:left;
}

向左浮动将修复它..

在同一行上对齐多个无序列表

2 个答案: