css ul and li - multiple spans in each li and how to line up the spans vertically


Tags: html,css,html-lists,vertical-alignment

Problem :

i have a list:

<ul>
    <li>
        <span class="first">the dog jumped over the fox</span>
        <span class="second">1</span>
        <span class="third">Edit</span>
    </li>
    <li>
        <span class="first">cat and mouse</span>
        <span class="second">1</span>
        <span class="third">Edit</span>
    </li>
    <li>
        <span class="first">doggie</span>
        <span class="second">1</span>
        <span class="third">View report</span>
    </li>        
</ul>

and i want to set the width of the first <span> in each <li> to be equal to the one with the longest text. in this case, the longest text is "the dog jumped over the fox" so i want all the other <span class="first">s to match it. i also want to apply the same logic to any additional <span>s within the <li>. basically, all the <span class="first"> have the same length, all the <span class="second"> have the same length, and all the <span class="third"> have the same length. here's what i want to achieve:

-------------------------------------------
the dog jumped over the fox |1|Edit       |
-------------------------------------------
cat and mouse               |1|Edit       |
-------------------------------------------
doggie                      |1|View report|
-------------------------------------------

thanks!



Solution :

Apply CSS like below.

 ul{display:table; width:100%; padding:0;}
 li{display:table-row;}
 li span{display:table-cell; text-align:left;}

DEMO


    CSS Howto..

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How can I get the first and last name labels to align under the corresponding input forms?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    Wordpress how to tell my css version

    How to add and remove background images in css on clicking a link on page

    CSS How to attach input box to bottom of divider window

    How to align social like buttons next to copyright text inside footer?

    How to Change HTML Tags Using Javascript

    CSS show horizontal scroll bars?

    Jquery - 100% width slideshow whilst keeping the height propotional

    How to use CSS timing functions to animate an arc?

    How to expand a div with css

    JQuery Animate() showing sticky behaviour with other elements in the same class

    Telerik RadEditor for MOSS - How do I suppress min-width inline CSS?

    CSS - How to set margin-left dynamically with a fixed value

    How Should I Display This Background Using CSS?

    How to increase width of children from the right to the left? [closed]

    How to specify image size in webview css using dip?

    Show a box with text when hovering an image

    How can I position two divs on the same line and have them act responsive?

    jQuery show multiple image thumbnail before upload

    How do I apply an image to background using inline CSS?

    How to apply css to div content based on regex

    How to adjust the height of a series of DIVs by CSS

    How to maintain an icon font from SVG files

    How can I get these two divs to appear close to each other vertically?

    How do I center a table?

    How to apply @media for css attribute that are set via jquery

    How to get `:after` to work in extjs iconCls?

    How can I keep the hovered menu item open so I can edit it's style with firebug?