HTML5 Multiple Images on the same line with Captions - css

Question

I want to have multiple images on the same line with a caption below each image.
I can put images on the same line using the display:inline tag. When I add the figure tag, they are moved to different lines.
I tried multiple variation and can't get it to work.
Am I using the wrong tags for the job? I've seen this on other sites, but don't know how they do it.
CSS
section.products{
width: 100%;
padding:5px;
line-height:100%;
margin-top: 5px;
float: left;
text-align: center;
}
img.fans {
text-align: center;
max-width: 100%;
height: 50px;
width: 50px;
}
a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
p {
text-align:center;
align: center;
}
figure {
display:center;
}
ul.fans li{
display: inline;
}
HTML
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>

Answer 1

You've got a couple things wrong.
You didn't close your image tags properly
you have in inline style of "float" which is not valid
This should help get you what you're looking for.
Css
ul.fans li {
display: inline-block;
}
figcaption {
text-align: center
}
Html
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded"/>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
Codepen Example

Answer 2

with html 5 the proper way to put an image tag is like so
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" />
You dont need a tag because you never finished opening the tag, it seems like you are mixing the old way of doing things like this
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>
display inline will make the li act as if they are a p tag or any other inline element.
The reason they are going to new lines when you add a figcaption is because figcaptions are display: block. block display types will always push items to the next line. with css you can change the display types of items like you did with the li elements.The figure tag is also a block element.
when you write html please always indent when there is nesting (an element inside of another one)
Also the style="Float" is not valid css. anything in between the "" will be css and it is called inline css. It is best to not have css inline because it can cause problems when trying to change the css the majority of elements later on.
you can add css in the top of your document with the style tag. like so
<style type="text/css">
ul.fans li {
display: inline;
}
</style>
You will want to correct the closing tag and get the css in the right spot, and make sure you do not do inline css (style="float:left;").
Since stated from the answer before that you probably don't need a list for this because lists are for breaking into new line, you will probably want to do something like this instead
<style type="text/css">
.fans li{
display: inline;
}
.fans .captioned-image {
display:inline-block;
width:200px;
}
.fans figure {
width: 200px;
display:block;
text-align:center;
}
img {
max-width:200px;
}
</style>
<section class="products">
<h1>Fans</h1>
<p>
<div class="fans">
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shrouded</figcaption>
</figure>
</a>
</div>
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</div>
</div>
</p>
</section>