CODEWITHSUNDEEP
css
Jason
Jason

Reputation: 29

5 Images not in line

I have a DIV which is 900% wide, I'm trying to display 5 images in a line but the 5th one always wraps around and I can't work out why?

I'm well under 900px with my 5 images.

ul{
  margin:0px;
  padding:0px;
}
li{
  margin:0px;
  padding:0px;
  list-style:none;
}

.photo-preview{
  width:178px;
  margin:0px;
  display:inline-block;
  text-align:center;
}

.bottom-row{
  width:900px;
}
<div class="bottom-row">
  <ul>
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>                             
    </ul>
</div>

Upvotes: 0

Views: 113

Answers (2)

Ricky Dam
Ricky Dam

Reputation: 1895

Here you go!
Like @WizardCoder said, there will always be a tiny bit of spacing between images but a -1px will fix it for you!

EDIT: I have tailored the question to be exactly the code you posted on JSFiddle. Anyways,

  1. You need to have your display: inline on the li item.
  2. You need the class photo-preview on the img and not on the li item.

ul {
  margin: 0px;
  padding: 0px;
}

li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline;
}

.photo-preview {
  width: 178px;
  margin: -1px;
  text-align: center;
}

.bottom-row {
  width: 900px;
}
<div class="bottom-row">
  <ul>
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>   
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>   
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>   
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
  </ul>
</div>

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

Most browsers add a little bit of space between inline list items. YOu can use this funky formatting hack to stop that happening. Or you could just float them left if that suits your needs.

<div class="bottom-row">
  <ul>
    <li class="photo-preview"><img src="photo/2.JPG"></li><li class="photo-preview">
    <img src="photo/2.JPG"></li><li class="photo-preview">
    <img src="photo/2.JPG"></li><li class="photo-preview">
    <img src="photo/2.JPG"></li><li class="photo-preview">
    <img src="photo/2.JPG"></li>                             
  </ul>
</div>

Upvotes: 3

Related Questions