Horizontal Lists

[jkruer01]

Hello,

After reading the following article ( http://www.alistapart.com/stories/taminglists/ ) I know that it is possible to make horizontal lists.

Here is my question though. If I make a horizontal list and the lists wraps to the next line, which it will, is there anyway to make the items line up vertically.

For examply, instead of it being like this:

Item1 | Another Item | More Items
Even More Items | Still Some More

I want it to look like this:

Item1               | Another Item    | More Items
Even More Items | Still Some More |

Is this possible without using tables?

Thanks!

[nkaisare]

Even when you use tables, the lists do not get wrapped in a fluid manner. In other words, vertical alignment will have to be hard-coded. For example, say you have 10 links: Link1 to Link10. On 1024*768, they appear in a single line, but wrap when viewed with 800*600. Even if you use tables, you will not get the flexibility of having it wrapped the way you are looking for.

Anyway, after all the balh-blah, here is a suggestion: add width {***px} in your li styles. This way, when the list gets wrapped, they will appear to be vertically aligned as well.

If this method doesn't work for you, post an example with tables, and we will try to give you a css solution.

[jkruer01]

I don't care necessarily about it being fluid, I just want it to be lined up vertically.

If I used a table I would just have it so that there are three accross everytime. I tried to set the width using width: ... but it didn't work.

If you have any other suggestions I would appreciate it.

Thanks!

[nkaisare]

The reason is that NS does not apply width to inline elements. Let me look into it a little more before giving you a reply.

- Niket

[nkaisare]

I can't think of a way to do it on inline list. So if you want something like this:

My favourite links: Link 1 | Link 2 | Link 3 | Link 4
                    Link 5 | Link 6 | Link 7 | Link 8. I hope
you enjoy these links as much as I do.

I dont think that can be done with lists. There are other ways to do it without tables.

But instead, if you want

Link 1 | Link 2 | Link 3 | Link 4
Link 5 | Link 6 | Link 7 | Link 8
-----------------------------------
OK, now its time for blah blah.

For the second type of display:

ul {margin: 0; padding: 0; display: block; list-style: none}
li {margin: 0; padding: 3px; float: left;
width: 150px /* replace with with em for more fluid layout */
color: #339; font-weight: bold; border-left: 1px solid black}
li.first {border-left: none;}

<ul>
<li class="first">...</li>
<li>...</li>
...
<li></li>
</ul>

[jkruer01]

Thanks,

That works great! I appreciate your help.

Thanks.