CSS - Display images side by side - html

Question

I'm creating a web page that shows pictures of cute dogs. For every dog, I want to show the name of the dog and then a picture below it.
I would like the images to be shown side by side, but they are shown stacked vertically.
Here is my fiddle
http://jsfiddle.net/53bnhscm/2/
Here is my HTML
<h1>Listing dogs</h1>
<ul>
<li> Dog 1 </li></br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li> Dog 2 </li></br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Here is my CSS
li {
list-style: none;
display: inline;
}
I thought a break statement after every list item and a display:inline property would do the trick, but I guess not.

Answer 1

Another solution is to use display: table-cell to ul elements:
ul {
display: table-cell;
}
li {
list-style-type: none;
}
<h1>Listing dogs</h1>
<ul>
<li>Dog 1</li>
</br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li>Dog 2</li>
</br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>

Answer 2

Your lis are contained within their own ul so you need to inline that instead.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
FIDDLE
Also li tags are more for list items so this isn't a real efficient way of doing this. Plus its a lot of extra code. You could simply wrap your sections in a container and inline that:
HTML
<h1>Listing dogs</h1>
<div class="wrapper">
Dog 1
<a href="/dogs/2">
<img alt="Dog 1" src="..." />
</a>
</div>
<div class="wrapper">
Dog 2
<a href="/dogs/3">
<img alt="Dog 2" src="..." />
</a>
</div>
CSS
.wrapper{
display: inline-block;
}
.wrapper a{
display: block;
}
EXAMPLE

Answer 3

Here a fiddle. Your markup is messy by the way, I recommend to use HTML5 markup <figure> so you can easily add a <figcaption>: http://jsfiddle.net/53bnhscm/7/
<h1>Listing dogs</h1>
<figure>
<figcaption>Dog 1</figcaption>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</figure>
<figure>
<figcaption>Dog2</figcaption>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</figure>
CSS
figure {
float:left;
display:inline-block;
}

Answer 4

ul > li {
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}
And I think may be you are looking something like this. In that case you have to edit your html code
http://jsfiddle.net/ahmadsharif/p0cbmy2h/

Answer 5

The following answer is correct for your markup.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
But if you mean exactly what is written in your question then one thing that I need to mention and it is “You should take care of your HTML markup.”
<ul>
<li>
<a href="/dogs/2">
<b>Dog 1</b>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
<li>
<a href="/dogs/3">
<b>Dog 2</b>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
and then your CSS will be:
ul li{
display: inline-block;
}
ul li a b{
display: block;
text-align: center;
margin-bottom: 5px
}

Answer 6

Just use UIKIT and its grid system. This way they will stack automatically on phones.
http://getuikit.com/docs/grid.html
<div class="uk-grid">
<div class="uk-width-1-2">Your Image HERE</div>
<div class="uk-width-1-2">Another Image Here</div>
</div>