unordered lists as columns

Question

I am trying to use unordered lists as columns something setup like the following:

<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 would I need to do as far as css these to lineup side by side as vertical lists with no bullets. I'm sure I'm missing something simple but I can't seem to figure it out. I specifically need this to work in IE7.

Thanks in advance, Ben

Answer 1

Here's the really short answer:

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

Here's the slightly longer explanation:

• The float part tells your lists to move together "on the same line". You might want to add a width property to the ul elements as well, in order to get equally distributed columns.

• The list-style-type property simply turns off your bullets. Most likely, you will now have empty space where the bullets used to be. This can be removed by overriding maring and padding - eg. set them both to zero.

You might also want to add a clear: left property on whatever element is following the lists.

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>

Something along those lines... keep in mind that this will look quite a bit more "standard" between browsers if you have a decent CSS reset block. I recommend Blueprint.

Answer 3

Here's 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;
}