CODEWITHSUNDEEP
htmlcss
Wanting to learn
Wanting to learn

Reputation: 468

trying to get images to line up horizontally

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>

Upvotes: 2

Views: 4825

Answers (3)

Paul Roub
Paul Roub

Reputation: 36458

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>

Upvotes: 7

Sterling Archer
Sterling Archer

Reputation: 22425

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>

Upvotes: 0

sukhjit dhot
sukhjit dhot

Reputation: 353

remove tags ul li and try again

Upvotes: 1

Related Questions