HTML неупорядоченный список CSS

Question

У меня есть неупорядоченный список, каждый элемент списка содержит два диапазона (скажем, диапазон A и диапазон B).Теперь мне нужно отформатировать их так, чтобы они были размещены горизонтально по всему экрану, когда промежуток А всегда находится сверху промежутка В.

Eg.  spanAItem1 spanAItem2 spanAItem3
     spanBItem1 spanBItem2 spanBItem3

Как я могу сделать это с помощью какого-нибудь творческого CSS?

Answer 1

Примерно так вы приблизитесь:

ul {float: left; list-style-type:none;}
ul li {float: left; margin-right:20px;}
ul li span {display:block}

* отредактировано под ваш комментарийВозьми оттуда:)

Answer 2

После ответа Триптиха:

• Обязательно добавьте <br clear="all" /> или <div style="clear: both"></div> или что-нибудь, что реализует поведение clear:both после тега </ul>.

• Чтобы удалить маркеры, используйте свойство list-style-type:

ul {float: left; list-style-type: none;}

• Чтобы добавить больше пространства междуэлементы, используйте свойство margin:

ul li {float: left; margin: 10px;}

Answer 3

Чтобы добавить к @Joel Alejandro и @Tryptych, если вы установите ширину ul, li s будет перенесен на следующую строку. Тем не менее, IE6 не будет правильно переноситься, поэтому, если более старые браузеры вызывают беспокойство, добавление класса «row» к элементу в начале каждой строки вместе с .row{clear:both} будет лучшим решением, как заметил @Joel Alejandro. 1004 *