why images not showing horizontally in css?

Question

I try to show images horizontally using css but it did not work ?

can anyone suggest on how to show images horizontally using css ?

here is my code https://jsfiddle.net/urLdLdLm/3/

i tried :

.outer {width:1000px; margin:0 auto 0 auto;
.outer li img{ display: inline-block;}

.outer {width:1000px; margin:0 auto 0 auto;}
.outer li img{ display: inline-block;}

<div class="outer">
  <ul>
    <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
    <li><img alt=""   src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
     <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
 <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
  </ul>
</div>

Put the `display: inline-block` on the `.outer li`, not `.outer li img` — Rory McCrossan, Feb 13 '17 at 11:13
The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Feb 13 '17 at 11:13
It does: https://jsfiddle.net/urLdLdLm/5/. If that doesn't work in your case check the elements in the DOM inspector to see what other CSS rules are being applied to them, and from where — Rory McCrossan, Feb 13 '17 at 11:14
here is a link : https://jsfiddle.net/urLdLdLm/4/, and it's working fine. — Vilas Kumkar, Feb 13 '17 at 11:14

score 1 · Answer 1 · answered Feb 13 '17 at 11:44

I personally would use flexbox to accomplish that

.outer {
  width: 1000px;
  margin: 0 auto;
}
.outer ul {
  display: flex;
  list-style-type: none;
  align-items: flex-end;
}

<div class="outer">
  <ul>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
    <li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA">
    </li>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Feb 13 '17 at 11:13

The problem are not your images, but the list, which by default displays its li children underneath each other.

.outer li,
.outer li img {
  display: inline-block;
}

Will fix this.

.outer {width:1000px; margin:0 auto 0 auto;}
.outer li,
.outer li img{ display: inline-block;}

<div class="outer">
  <ul>
    <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
    <li><img alt=""   src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
     <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
 <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
  </ul>
</div>

@downvoter: might be bothered to explain your reasons? – Constantin Groß Feb 13 '17 at 15:11 — Constantin Groß, Feb 13 '17 at 15:11

why images not showing horizontally in css?

2 Answers2