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

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.

Заранее спасибо Бен

Answer 1

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

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

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

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

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

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

Answer 2

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

Answer 3

Вот пример:

<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;
}