How to make resizable li elements with CSS only


Tags: css,list,html-lists

Problem :

Scenario: I have an unordered list < ul > of width (lets say 200px) with four < li > elements that are sized equally. Therefore each should be 50px. When I add a 5th < li > element each width should re-size to 40px. If I change the width of the < ul > to 500px with 5 < li > elements, each < li > element should be 100px.

Is this possible with only CSS? If yes, how is it implemented?

Currently, I have a solution that meets the above requirements but it includes jQuery to re-size the < li > elements based on mathematical calculations.

Thanks for the attention.



Solution :

Aparently you can fake tables like here, but I am not sure if this works in all browsers(edit: it works on winxp ie8, chrome 7, firefox).

<div id="menu">
    <ul>
        <li>
            <a href="...">...</a>
        </li>
        <!-- other list items -->
    </ul>
</div>

#menu {
    display: table;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
}

Also example on fiddle.net here


    CSS Howto..

    How to make my css webkit animation stop changing

    How do I center “my” navigation bar?

    how to define minimum height for tbody in css

    How to return a “text” in css less?

    How large can CSS values be?

    How to hide a parent div if an inner div has a certain class, with javascript

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    Last inherited display property is inline but computed is block. How is this even possible?

    How to make all elements in one line?

    How to format a title attribute with css (setting more width)?

    How to use 'dynamic CSS' in Rails

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How to hover mutiple “div” in the same time?

    How to justify 4 divs in one row [duplicate]

    how to turn off the break word in css? [duplicate]

    how to apply css transition to background image

    How to prevent the scroll of table when click to header on Chrome?

    How to conditionally load CSS

    How to highlight table row on hover using CSS only?

    How to make the footer stick to the bottom?

    How to align things responsive html CSS

    How to make a svg-filled background go animating by pure CSS?

    How to change tr color on mouse over when there is already implemented?

    outlook.com how to target css at a specific class

    How can I replicate the StackOverflow questions list format?

    How to change style to a class from a rel attribute CSS

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    float css only menu - how to modify on section2

    How to COLOR lower-roman ordered list style in html with just css?

    How to switch images on click in html and css