Wrap each item in horizontal list using CSS

I've got a horizontal list with long items that I want to wrap. The list wraps fine if one list item is really long or if all the list items are really short.

However, if two list items are both long, they will not split across the available space. This image shows the problem:

enter image description here

Here's the markup I'm using:

<html>
<style>
    ul {text-align:left; width:400px}
    li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;}
    li a {display:inline; white-space:normal;}
</style>
<body>
<ul>
    <li><a href="#">>alf; fa sadlf;</a>  </li>
    <li><a href="#">>a sdf; fa sd; asd;lfgj </a></li>
    <li><a href="#">>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj</a> </li>
    <li><a href="#">>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</a></li>
</ul>
</body>
</html>

Solution

You can do this by getting rid of some of your code. If I understand correctly, all you'll need is the following:

 ul { width:400px; }
 li {
    list-style-type:none; 
    display:inline;
    padding-left:20px
 }

Here's an example: http://jsfiddle.net/M9zqE/