Wrap each item in horizontal list using CSS

StackOverflow https://stackoverflow.com/questions/8450225

Question

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>
Was it helpful?

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/

OTHER TIPS

It's fixed by not floating items (thus not removing them from the flow)

See http://jsfiddle.net/pRCFR/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top