Say you have a list like this:
- Item A
- Item B
- Item C
…And you want it to look like this:
-
Item A
-
Item B
-
Item C
When you have lists that contain a lot of text, spacing out the items can improve readability.
As far as I know, this isn’t possible in the visual editor (unless you went the semantically-incorrect route of creating a new <ul> for each list item).
To add spacing, you’ll need to go to the HTML editor. In WordPress 2.5, select the “HTML” tab of the post editor; in previous 2.x versions, select the “Code” tab.
Here is what your list code would look like:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
To create spacing, just add the <p> and </p> tags to the beginning and end of each item like so:
<ul>
<li><p>Item A</p></li>
<li><p>Item B</p></li>
<li><p>Item C</p></li>
</ul>
Then save the post and voilà! Spaced lists.
Tags:
Subscribe to feed
2 Comments
Wow, that’s pretty terrible if you ask me
The best way to do so is, definitely, to add a CSS rule so that li elements are padded. Either all your lists within posts, or just the <ul class=”spaced”> ones.
Hi Ozh,
Thanks for the comment. I’d have to disagree with you that CSS is the only answer. I see three good reasons for using the <p> element:
Using the <p> element allows the spacing to be maintained when your post is being viewed in feedreaders.
If you’re using WordPress MU, CSS classes aren’t allowed — and stylesheet editing isn’t either.
If your lists contain enough content to warrant padding for readability purposes, then it’s probably a paragraph, which means that the <p> element is entirely semantically-correct.