Обернуть каждый элемент в горизонтальном списке с помощью CSS

У меня есть горизонтальный список с длинными предметами, которые я хочу обернуть. Список прекрасно переносится, если один элемент списка действительно длинный или все элементы списка действительно короткие.

Однако, если два элемента списка являются длинными, они не будут распределяться по доступному пространству. Это изображение показывает проблему:

Вот разметка, которую я использую:

<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>
Источник

2 ответа

Решение

Вы можете сделать это, избавившись от части своего кода. Если я правильно понимаю, все, что вам нужно, это следующее:

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

Вот пример: http://jsfiddle.net/M9zqE/

Источник

Это исправлено не плавающими предметами (таким образом, не удаляя их из потока)

Смотрите http://jsfiddle.net/pRCFR/

Источник
Другие вопросы по тегам