[英]align li elements on right side
我有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>
我希望这些图像位于每个图像的右侧,而不是彼此下方。
您可以使用float:left
以及display:inline-block
ul li{
float:left;
}
要么
ul li{
display:inline-block;
}
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>
将li{float:left;}
到您的CSS代码中
您还可以根据此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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.