在右邊對齊li元素

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

要么

ul li{
  display:inline-block;
}

Answer 2

Flexbox可以做到這一點：

 .flex { display: flex; } 

 <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> 

Answer 3

將li{float:left;}到您的CSS代碼中

Answer 4

您還可以根據此Stack Overflow文章使用display：inline：

 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>