trying to get images to line up horizontally

Question

I can't for the life of me get a set of images to line up on screen horizontally.

#full_image {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

#full_image ul li img {
  display: inline;
  margin: 0 auto;
  width: 100%;
  max-width: 100%
}

<div id="full_image">
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>

</div>

Paul Roub · Accepted Answer · 2017-05-11T13:51:54.923

7

You're creating a new list with each image, for starters; and each list is a block-level (not inline) element. Block elements start on a new line, by default.

Then, your display: inline is applied to the images, not to the li that contains them, which is still at block level.

Finally, list-style: none doesn't make sense on a div. I assume you mean to apply it to a list.

So:

#full_image {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

#full_image li {
  display: inline;
}

#full_image li img {
  margin: 0 auto;
  max-width: 100%
}

<ul id="full_image">
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
</ul>

edited May 11 '17 at 13:51

answered Sep 04 '13 at 21:38

Paul Roub

36,322
27
84
93

Thanks that does work but I need the ul li tags because I'm going to use it in a image slider – Wanting to learn Sep 04 '13 at 21:54
How can you then get the whole thing to be centered? – SumNeuron May 11 '17 at 13:48
@SumNeuron There are plenty of ways to do that. Look at the "Related" list on the right side of this page, particularly the first few "how to center..." questions. – Paul Roub May 11 '17 at 13:52
I have looked at these, but these solutions do not work with the inline img tags :/ – SumNeuron May 11 '17 at 17:27
Almost certainly doable through CSS. Pull together sample HTML showing the issue, and CSS you've tried, and [ask a new question](//stackoverflow.com/questions/ask). – Paul Roub May 11 '17 at 17:30

score 1 · Answer 2 · answered Sep 04 '13 at 21:38

1

remove tags ul li and try again

answered Sep 04 '13 at 21:38

sukhjit dhot

353
2
5
18

I need the ul li tags because I'm going to use it in a image slider – Wanting to learn Sep 04 '13 at 21:53
maybe this can help http://stackoverflow.com/questions/885691/make-ul-elements-appear-in-a-horizontal-row – sukhjit dhot Sep 04 '13 at 22:06

score 0 · Answer 3 · answered Sep 04 '13 at 21:39

Remove the list tags

http://jsfiddle.net/cxfNb/ they line up fine. If you want the bullet points, you'll have to remove the block style of the ul and li tags

<div id="full_image"> 
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>   
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>  
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>  
</div>

trying to get images to line up horizontally

3 Answers3