Question

This is the code for a horizontal <ul> that I’m using:

.list ul{
    width: 100%;
}

.list li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    padding-bottom: 20px;
}

Using this, if I do this:

<ul class="list">
    <li>
       <img src="myImg.png" />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

Then it all works, however if I put a <br> between the image and the edit/delete buttons, e.g:

<ul class="list">
    <li>
       <img src="myImg.png" />
       <br />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

Then the list breaks, and I get the images in a vertical list instead of horizontal. Screenshot when its working:

Screenshot of when its not working:

Any ideas?

Answer 1

Replace the

display: inline

with

float: left

Example fiddle