I have a list of items that I want to be laid out horizontally. It's basically a row of pictures with captions. Something like
picture1 picture2 picture3
caption1 caption2 caption3
So I figured that was a unordered list with List elements styled with "display: inline". But the captions have to be block elements otherwise they are printed in line like this:
picture1 caption1 picture2 caption2 ...
But when they're block elements the list stays vertical:
picture1
caption1
picture2
caption2
picture3
caption3
Do I need to use floated divs instead of a list in this case? What's the best way to make this work?
Below is a complete example using divs instead of images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Blah</title>
<style type="text/css">
.myclass li{
list-style: none;
display: inline;
}
.item{
display: inline;
}
</style>
</head>
<body>
<div class="myclass">
<ul>
<li><div class="item"><a href="http://google.com">one</a><p>uno</p></div></li>
<li><div class="item"><a href="http://google.com">two</a><p>dos</p></div></li>
<li><div class="item"><a href="http://google.com">three</a><p>tres</p></div></li>
</ul>
</div>
</body>
</html>