Question

我的代码中有li，如下所示

<ul class="thumbnails-carousel clearfix" style="list-style:none;">
  <li><img src="http://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1.jpg"></li>
 <li><img src="http://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="2.jpg"></li>
 <li><img src="http://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="3.jpg"></li>
 <li><img src="http://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="4.jpg"></li>
</ul>

我希望这些图像位于每张图像的右侧，而不是相互低于它们。

Answer 1

您可以使用float:left以及display:inline-block

ul li{
  float:left;
}

OR

ul li{
  display:inline-block;
}

Answer 2

Flexbox可以做到这一点：

＆＃13;

.flex {
  display: flex;
}

＆＃13;

<ul class="thumbnails-carousel flex" style="list-style:none;">
  <li>
    <img src="http://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1.jpg">
  </li>
  <li>
    <img src="http://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="2.jpg">
  </li>
  <li>
    <img src="http://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="3.jpg">
  </li>
  <li>
    <img src="http://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="4.jpg">
  </li>
</ul>

＆＃13;

Answer 3

添加 {c}代码li{float:left;}

Answer 4

您还可以使用display：inline，per this Stack Overflow article：

li {display: inline;}

List items are block elements, and as such, take up an entire line each before breaking. Inline elements are not block elements and as such can then share space on a line.
<ul class="thumbnails-carousel clearfix" style="list-style:none;">
  <li><img src="http://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1.jpg"></li>
 <li><img src="http://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="2.jpg"></li>
 <li><img src="http://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="3.jpg"></li>
 <li><img src="http://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="4.jpg"></li>
</ul>

在右侧对齐li元素

4 个答案: