How to add thick line to each column of a multi-column list?

I have a list of items on my page, but the list is displayed over 3 开发者_如何学编程columns. I like it because it's semantic in its meaning to search engines and it's light on the HTML.

But I have to make it have a thick line at the bottom of each column.

An example of the two can be seen here: http://jsfiddle.net/MavvB/3/

with the example I have to mimic, the line at the bottom is achieved by adding the style to the bottom div of each 'list':

.AlphaIndexFundListBottomLineStyle  {
border-left-width:1px;
border-top:2px solid #E9DECF;
overflow:hidden;
text-indent:-3px;
width:180px;
}

I can't do this though because I'm using <ul> elements instead of <div>

Is it possible for me to achieve the thick line at the bottom of each column with the existing HTML/CSS structure or do I have to look into restructuring the HTML/CSS?

edit: just to note, it's not as simple as adding 3 <ul> structures to the HTML becuase of the way the items are ordered. If you notice, the list is ordered alphabetically, but from right to left, rather than top to bottom. This would make it much trickier adding the items to multiple lists.

I think you have four options to get a line underneath each column, each with pros and cons.

Firstly you can add a thick border to the bottom of the unordered list, but this doesn't have the gap you require.

.directory-result ul {border-bottom: 2px solid #E9DECF;}

Secondly you can use CSS3 to apply a border to the bottom of the last three list items, although this might not visually be what you want when the columns are different height, and doesn't work in Internet Explorer (including IE9).

.directory-result li:nth-last-child(-n+3) {
     border-bottom: 2px solid #E9DECF;  
}

Thirdly you can use Javascript / jQuery to add the underlines in the same way as the CSS3 method above. The advantage is it'll also work in IE and you can calculate the number of list items and only add it to the last one or two if need be, but you'll need to be supporting Javascript.

Fourthly, if it's possible with your back-end code, you can add classes to your final three list items. You can then style these specifically and it will be supported by all browsers.

Finally you can use different mark-up such as divs or three unordered lists.

Add the line on your ul tag:

ul {
    border-bottom: solid 2px #000;
}

You can try making it a block and adjust several properties like it would be a div with display:block or display:inline-block

You could try putting a y-repeating background image on your ul that is the same height as your lis. The problem with that is if the text goes onto two lines, it's not going to work.

I'd think you're best off using a div here. Someone's probably going to prove me wrong though.