html horizontal two-element lists - html

Question

I have a list of names that I'm displaying in one cell of a table with a space between each. For formatting reasons I want to avoid putting each in its own table cell. I now want to put a small avatar or photo above each name. I can obviously do one person as <img src="photo.gif"><br>name... but using or obviously creates a vertical not horizontal list. I can no longer use spaces obviously.
Is there any horizontal version of a <br> tag that I could use to space out the people?
Alternatively, is there a way to do this with css? I found some references to placing images side by side using float left, however, the text is not in a tag. Using multiple span tags does not seem so appealing. Here is img code I found.
.left{
float:left;
margin:0;
padding:0;
}

Answer 1

Using the following CSS:
.horizontalList li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}
You can make an element which usually displays as a block i.e. <LI> , <DIV> , etc to display inline. The margins are just added to give a little space between each element.
So for example,
<UL class="horizontalList">
<LI><img src="img1.png"/>Person 1</LI>
<LI><img src="img2.png"/>Person 2</LI>
<LI><img src="img3.png"/>Person 3</LI>
<LI><img src="img4.png"/>Person 4</LI>
</UL>
Just as well, you can alter the style of the images to display as a block rather than inline, so you can add this CSS to do that:
.horizontalList img {
display: block;
margin-bottom: 10px;
}