Method 1: Floating list items

Notes:

Internet Explorer and Opera won’t display the list item numbers when, as in this case, list items are floated left or right or given an explicit width.
On first glance, list items may appear to fall into vertical columns, but they are actually arrayed horizontally. The illusion of vertical columns is caused by the proportions of the list items that are much wider than they are tall.
After the list I’ve cleared the float with a <br /> styled { clear: left; }. This is non-semantic content (the clear should perhaps have been applied to the next element on the page that has purpose), but I wanted to highlight its necessity in keeping subsequent page elements from being affected by the float.

XHTML:

<div class="wrapper">
  <ol
    ><li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ><li><a href="#">Calendula</a></li
    ><li><a href="#">Damiana</a></li
    ><li><a href="#">Elderflower</a></li
    ><li><a href="#">Feverfew</a></li
    ><li><a href="#">Ginger</a></li
    ><li><a href="#">Hops</a></li
    ><li><a href="#">Iris</a></li
    ><li><a href="#">Juniper</a></li
    ><li><a href="#">Kava kava</a></li
    ><li><a href="#">Lavender</a></li
    ><li><a href="#">Marjoram</a></li
    ><li><a href="#">Nutmeg</a></li
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>
  <br />
</div><!-- .wrapper -->

CSS:

ol
{
  width: 30em;  /* room for 3 columns */
}
ol li
{
  float: left;
  width: 10em;  /* accommodate the widest item */
}
/* stop the floating after the list */
br
{
  clear: left;
}
/* separate the list from what follows it */
div.wrapper
{
  margin-bottom: 1em;
}

/* anchor styling */
ol li a
{
  display: block;
  width: 7em;
  text-decoration: none;
}
ol li a:hover
{
  color: #FFF; /* white */
  background-color: #A52A2A; /* brown */
}

Method 1: Floating list items

The above markup should render like this:

Notes:

XHTML:

CSS: