Unordered Lists as Columns

Question

I am trying to use unordered lists as columns that are set as:

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

What I need to do until they appear next to you is like vertical lists without a bullet. I am sure that I am missing something simple, but I cannot understand it. I specifically need this to work in IE7.

Thanks in advance Ben

Answer 1

Here is a really short answer:

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

Here is a slightly longer explanation:

• The part floattells your lists to move together "on the same line." You might want to add a property widthto the elements ulto get equally distributed columns.

• 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 reset. Blueprint.

Answer 3

Here is an example:

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