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 lock scroll for all page?

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to do this with vertically stacked tabs, instead of horizontal?

    how to build a triangular slider? [closed]

    How to Hide Specific Part of Flash Object Using CSS?

    How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

    How can I style this span for a quote without causing this layout problem?

    How can I change the number of columns in the product list?

    How to switch visibility of an HTML div in css for overlaying

    Showing calendar exactly below a textbox

    How to Set an if in css for opera browser? [duplicate]

    How to recalculate the css url paths when moving it to a different folder

    How to vertically align

    tag in navbar

    Show text-decoration when hover over div

    CSS / Javascript: hidden div does not take full width after being shown

    How to undo CSS change after clicking on another link

    How achieve rounded shadow behide a rounded element using css3

    css how to make the div width just for the content

    How to target this HTML in CSS?

    How to best make a hover navbar?

    How to reset inline css applied by jquery?

    How to keep top of element static while bottom is dynamic. -CSS

    How do i check if a link has been visited?

    How to remove all the borders of a selectbox?

    How do I create a side menu navigation bar that opens items to the right [closed]

    How to make a CSS rule which applied on a div affect another div?

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How to implement a finished coded html/css page into CMS [closed]

    How to make a CSS composite scalable

    How to make this Header/Content/Footer/Menu layout using CSS?