Sly 0

Hi,

I'm trying to replicate this:

<table style="width:100%;">
    <tr>
        <td>col1</td>
        <td style="text-align:center;">col2</td>
        <td style="text-align:right;">col3</td>
    </tr>
</table>

But using an unordered list instead of a table.

I tried this but the items do not expand horizontally across the available space.

<ul style="width:100%; list-style-type:none">
    <li style="text-align:left; display:inline;">
        col1
    </li>
    <li style="text-align:center; display:inline;">
        col2
    </li>
    <li style="text-align:right; display:inline; ">
        col3
    </li>
</ul>

Thanks

EDIT: In fact I don't need to use a <ul>, I just want to get that layout without using tables if possible.

5 answers

Emily G 620
1
point
This was chosen as the best answer

If you can reorder your list items this will work:

<style type="text/css">
        ul, li {padding:0;margin:0;}
</style>

<ul style="list-style:none;">
    <li style="float:left;">
        col1
    </li>
    <li style="float:right;">
        col3
    </li>
    <li style="width:100px;margin:0 auto;text-align:center;">
        col2
    </li>
</ul>
Answered about 7 years ago by Emily G
  • @Emily: Thanks it works for this specific case. And how do I do if I want 4 or 5 "columns"? And why did you specify a width to the col2 item. If that item had a backgroud color, the backgroud color would be too wide. Sly about 7 years ago
  • It only works for three columns but that was the test case you gave us. :) Col2 has a width so centering with margin:0 auto will work. It doesn't matter what the width is though since the text is aligned to the center. Emily G about 7 years ago
  • Making it work for more columns wouldn't be hard. +1 Abinadi Ayerdis about 7 years ago
  • @Emily: You are right, I asked for three columns and in this specific case, 3 columns is what I need. I'm also looking at a general mean to do columns without a table and I'd rather use the same approach every time I need this type of layout. Sly about 7 years ago
  • @Emily: About 100px width issue: If you add a different backgroud-color to each List Item you will see what I mean. The background is "tight" for the left and right columns but the background of the center columns is wider then its content. Sly about 7 years ago
1
point

Try this (off the top of my head!):

CSS:

    ul
    {
    width:100%;
    display:inline;
    list-style-type:none;
    }
    li
    {
    width:33%;
    }

    .left
    {
    text-align:left;
    float:left;
    }
    .right
    {
    text-align:right;
    float:left;
    }
    .center
    {
    text-align:center;
    float:left;
    }

HTML:
    <ul>
         <li class="left">
    left
         </li>
         <li class="center">
    center
         </li>
         <li class="right">
    right
         </li>
    </ul>
Answered about 7 years ago by tahdhaze09
  • Well coded. It seems to be the closest match to the table. I would have put li { width:33%;float:left; } instead of putting 3 float:left's, but either way works. Abinadi Ayerdis about 7 years ago
  • @tahdhaze09: Thanks for your answer. On my PC, it works on Firefox 3.5 and on Safari 4. Strangely enough, in IE8, it works in compatibility mode but not in normal mode. In normal mode, the right column appears somewhat centered, on a 2nd "line". Sly about 7 years ago
  • You're welcome. Funny, with IE8 that MS promised it would "be in compliance" in all modes. tahdhaze09 about 7 years ago
0
points

FYI, I have answered this here, where I provide a solution for an arbitrary number of items in a manner that is compatible with Chrome, FireFox, Safari, Opera and MSIE 8,7,6:

Doctype: How to evenly distribute variably sized li's horizontally

Answered over 6 years ago by Daniel Norton
0
points

Try:

<ul style="width:100%; list-style-type:none">
    <li style="text-align:left; display:inline-block; width:33%;">
        col1
    </li>
    <li style="text-align:center; display:inline-block; width:32%;">
        col2
    </li>
    <li style="text-align:right; display:inline-block; width:33%;">
        col3
    </li>
</ul>

Be mindfull though that support for inline-block is pretty new in some UAs and you might have to tweak the css for some UAs. A trip to google.com and a search for "cross-browser display inline-block" will do the trick for you.

Answered about 7 years ago by anddoutoi
  • @anddoutoi: Thanks for your answer. On my PC, the code you provided does not work on IE8, Firefox3.5, Safari4 and IE8-compatibility mode. In all cases but the later, the middle item is displayed on a 2dn line and the total width of the ul only occupies about 70% of the browser width. On IE8-compatibility mode the inline-block block seems to be completely ignored. Sly about 7 years ago
  • Might be the default margin/padding on ULs and LIs. Normalize these with ul, li {margin: 0; padding: 0;}. anddoutoi about 7 years ago
0
points

You can replicate it by using all of the table related display properties, like so:

<div style="display: table; width: 100%;">
 <ul style="list-style-type:none; display:table-row; ">
     <li style="text-align:left; display:table-cell;">
        col1
     </li>
     <li style="text-align:center; display:table-cell;">
        col2
     </li>
     <li style="text-align:right; display:table-cell;">
        col3
     </li>
 </ul>
</div>

Sadly this doesn't work in EVERY browser. But enough to be useful.

Answered about 7 years ago by Jens Hedqvist
  • @Jens: Thanks, but sadly indeed, it does not work in IE7 (tested with IE8-compatibility mode). I'm afraid I'll have to use a table :( Sly about 7 years ago