List Hints
Posted: Wed Jul 06, 2005 10:25 am
Sometimes, your list items contain entire paragraphs of text, and you want to give each item a little breathing room. In the old days of presentational markup, you might cheat this by adding a line break after all but your last list item:
Nowadays, any good designer should run screaming from this practice. Instead, you can apply a margin to your list items with a little CSS:
This will work just fine, but it turns out HTML provides its own semantically correct solution. If your list items contain paragraphs of text, why not just mark them up as such?
List items are among a select few HTML tags that can contain either inline tags or block tags. Other tags that can do this include
source: SitePoint.com newsletter
Code: Select all
<ul>
<li>List item<br></li>
<li>List item</li>
</ul>Code: Select all
<style type="text/css">
/* This should go in an external CSS file */
ul.para li {
margin-top: 1em;
margin-bottom: 1em;
}
</script>
<ul class="para">
<li>List item</li>
<li>List item</li>
</ul>Code: Select all
<ul>
<li><p>List item</p></li>
<li><p>List item</p></li>
</ul>
List item
List itemCode: Select all
<div>, <td>, <th>, <ins>, <del> and <dd>.