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..

    How to stretch items in menu (from right to left) - HTML and CSS

    Rails 3: How to prevent image caching when the image is specified in the CSS file?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How do I hide the parent of a nested list while keeping the nested list visible?

    HTML CSS How to stop a table to put the content after it on a new line?

    How to use radio button checked or clicked property in my case

    How to align a button inside a DIV

    How to make div width almost 100%

    How to create a custom shape - css

    Push vertically resizable Div to bottom of wrapper. How?

    How to create this type of element using XHTML & CSS?

    How to create a table using multiple span in one div using CSS

    How to fix an image compared with another one in CSS?

    How to programmatically ungroup CSS selectors?

    How do I apply CSS style to ASCII character

    How to make a full page header?

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to change size of SVG circle

    How to apply :hover on :after to certain div in CSS

    How to prevent CSS/Javasript on specific selectors using Id?

    How did Google make these 3d buttons? [closed]

    How to change property of a specific CSS pseudo element?

    How do I obtain a floating element's left offset while it is outside the viewport?

    how do I find out which skin Telerik's RADeditor is using by default?

    CSS - how to apply styles to first elements in a static generated list

    How to use metro css with codeigniter?

    CSS: How to clear line-through for an element in a table row?

    How to stack divs from top to bottom in CSS

    How to avoid third party CSS to affect current CSS? [closed]

    How to select a great grandchild of an element by its id