a DIV inside a LI

Suppose you want to have a bunches of DIVs contained inside of a List Item… AND you want them to not mess with the height of the List Item and appear as a line of text?

Well then, take this sample HTML:

<li>
<div class="inspection">
<div class="date"><a href="/report/1430/9115/">9-16-2010</a></div>
<div class="inspection-type">License Renewal </div>
<div class="violations">0 Violations</div>
</div>
</li>

And apply this CSS:

.inspection {

overflow: hidden;

vertical-align: middle;

display: inline-block;

}

li {

margin-left: 15px;

list-style-type: disc;

list-style-position: inside;

}

Leave a Reply

Your email address will not be published. Required fields are marked *