неупорядоченные списки в виде столбцов

Question

Я пытаюсь использовать неупорядоченные списки в качестве столбцов, что-то вроде следующего:

<ul>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
</ul>
 <ul>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 </ul>

Что мне нужно сделать, чтобы css выстроил их рядом друг с другом в виде вертикальных списков без маркеров. Я уверен, что упускаю что-то простое, но я не могу понять это. Мне это особенно нужно для работы в IE7.

Спасибо заранее, Ben

Answer 1

Вот действительно короткий ответ:

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

Вот немного более длинное объяснение:

• Часть float говорит вашим спискам перемещаться вместе "на одной строке". Возможно, вы захотите добавить свойство width к элементам ul, чтобы получить одинаково распределенные столбцы.

• Свойство list-style-type просто отключает ваши пули. Скорее всего, теперь у вас будет пустое место, где раньше были пули. Это может быть удалено путем переопределения maring и padding - например. установите их обоих на ноль.

Вы также можете добавить свойство clear: left к любому элементу, который следует за списками.

Answer 2

Вот пример:

<div id="menucontainer">
  <ul>
    <li>w1</li>
    <li>w2</li>
  </ul>
</div>

Css:

#menucontainer ul {
  list-style-type: none;
}

#menucontainer ul li {
  display: inline;
  padding: 0.1em;
}

Answer 3

<div class="wrapper">
<ul>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
</ul>
 <ul>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 </ul>
<div class="clear"></div>
</div>

<style type="text/css">
ul {width: 40%; float: left;list-style-type: none;}
ul li {list-style-type: none;}
.clear {clear:both;font-size:0px;line-height:0px;height:0px;}
</style>

Что-то в этом роде ... имейте в виду, что это будет выглядеть немного более "стандартно" между браузерами, если у вас есть приличный блок сброса CSS. Я рекомендую Blueprint.