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

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

2 голосов
/ 09 декабря 2011

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

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

enter image description here

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

<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 ]

2 голосов
/ 09 декабря 2011

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

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

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

0 голосов
/ 09 декабря 2011

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

См. http://jsfiddle.net/pRCFR/

...