Fred J. Fred J. - 5 months ago 6
CSS Question

make inline list items certain width

I have the list items with image on the left and text on the right. Since each image is not exactly the same width, the text don't align vertically.

How can I make it so that the labels align vertically, each to the right of its image? Thanks



.checks-row {
display: inline-block;
}

.checks-row li {
display: inline;
}

.check-image {
width: 4em;
}


<ul class="checks-row">
<li class="check-image">
<img src="/{{this.image}}.gif">
</li>
<li class="check-label">{{this.label}}</li>
</ul>

Answer

Use following css:

.checks-row li {
    vertical-align: middle;
    display: inline-block;
}
Comments