Evenly spaced HTML list markup for columns

Question

I would like to make a list, such as the following, in 2/3 evenly spaced columns

<ul>
  <li>one<li>
  <li>two<li>
  <li>three<li>
  <li>four<li>
  <li>five<li>
  <li>six<li>
  <li>seven<li>
  <li>eight<li>
  <li>nine<li>
</ul>

One solution is to split the list into two lists and put one of them on the right, possibly with a note, for example.

  <div id="col2">
    <ul>
      <li>one<li>
      <li>two<li>
      <li>three<li>
      <li>four<li>
      <li>five<li>
    </ul>
  </div>

  <ul>
    <li>six<li>
    <li>seven<li>
    <li>eight<li>
    <li>nine<li>
  </ul>

#col2 {
    float: right;
    margin-right: 450px;
}

This works fine, but has a number of disadvantages:

• (Un) semantic markup is not exactly 2 lists, I divided one list into 2 to simplify the style
• Fields must be manually set to give a view of uniform distribution.
• If the browser is narrow enough, the right column will work in the second.

Is there a better way to do this, preferably without using a table?

---

Update:

1, . 3- , , "". ?

Answer 1

A List Apart , - -we-can-get , .

Answer 2

, 2 1 1, :

    1    2    3
    4    5    6

, , li 33% .

: 1 Rex M, ( , ):

html, , :

ul {
    width: 100%;        // for example
}
li {
    float: left;        // option 1
    display: inline;    // option 2, just one of the two
    width: 33%;         // for 3 columns, use 50% for two columns
}

.

Answer 3

The height of the <li> -s is different. Try setting a fixed height for the list item in css. You can also use something like

border: 1px solid red;

As one of the rules for a list item to see what happens.

I will also vote for the table, since using the method one breaks the order of the elements. But if this is not a problem for you, then go ahead.

Answer 4

Why without using a table? This is exactly what was intended for the tables.