align li elements on right side

Question

I have li like below in my code

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

I want these images to be on the right hand side of each image instead of going below each other.

1

`li {float: left;}` ? – Nenad Vracar Apr 25 '16 at 10:08

score 2 · Accepted Answer · answered Apr 25 '16 at 10:11

2

You can use float:left as well as display:inline-block

ul li{
  float:left;
}

OR

ul li{
  display:inline-block;
}

answered Apr 25 '16 at 10:11

Gaurav Aggarwal

9,809
6
36
74

score 2 · Answer 2 · answered Apr 25 '16 at 10:19

Flexbox can do that:

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

score 1 · Answer 3 · answered Apr 25 '16 at 10:12

1

Add li{float:left;} to your css code

answered Apr 25 '16 at 10:12

Pushpendra

1,694
14
27

score 1 · Answer 4 · edited May 23 '17 at 11:59

You can also use 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>

align li elements on right side

4 Answers4