I'm having trouble with getting unordered lists aligned how I want them to. Here's an image of what I'm looking to achieve. How can I get it to look like the version on the right?
I will have between 1 and 6 unordered lists depending on the page, so I need a generic solution. Here's a stripped down version of the css and html I'm using:
CSS:
body { margin: 50px auto; width: 500px; }
ul {
float:left;
margin: 0 20px 20px 0;
padding: 0;
width: 200px;
}
li {
background: #ddd;
list-style: none;
margin: 1px 0;
padding: 5px
}
li.title { background: #333; color: #fff; }
HTML:
<ul>
<li class="title">Title A</li>
<li>1A</li>
</ul>
<ul>
<li class="title">Title B</li>
<li>1B</li>
<li>2B</li>
<li>3B</li>
</ul>
<ul>
<li class="title">Title C</li>
<li>1C</li>
<li>2C</li>
</ul>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…