Forum Moderators: open
I am trying to create an unordered list using <ul> and <li>.
The problem is that I stuck some <p> in there and then some <br> in there too and it's not validating.
I have a link like:
blue widgets -- those blue widgets are fabulous
and then I want a blank line and then I want to say
green widgets -- wow, those widgets can't be beat.
What's the best way to accomplish this?
<ul>
<li>blue widgets -- those blue widgets are fabulous</li>
<li>green widgets -- wow, those widgets can't be beat.</li>
</ul>CSS:
li { margin-bottom: 1em; }Remember, <ul>s can only be a parent to <li> elements.
<li><a href="bluewidgettools"><b>Bue Widget Tools</b></a></li><br> -- "Those blue widgets are fantastic"<br><br>
<li><a href="greenwidgettools">Green Widgets are Great</b></a></<li><br> -- Those green widgets are outstanding" <br><br>
<li><a href="bluewidgettools"><b>Blue Widget Tools</b></a>
<br>-- "Those blue widgets are fantastic"</li><li><a href="greenwidgettools"><b>Green Widgets are Great</b></a>
<br>-- Those green widgets are outstanding"</li>
And second, use a padding-bottom rule for li instead of using <br> just to generate extra space. There's no content in there to "line-break" -- so what you are doing is actually padding the bottom of the list item, and a css rule represents that accurately.
You might also create a css rule that makes anchor tags bold if they are within a list item:
li a {font-weight:bold}
Then you can drop those<b> tags as well:
<li><a href="bluewidgettools">Blue Widget Tools</a>
<br>-- "Those blue widgets are fantastic"</li><li><a href="greenwidgettools">Green Widgets are Great</a>
<br>-- Those green widgets are outstanding"</li>
