CODEWITHSUNDEEP
csscss-floatwidth
Kyle Williams
Kyle Williams

Reputation: 19

Element width based on how many siblings are present

Say I have a ul of 500px. Say that the child li's are float left. Is there a way to write the css so the li's never go to a second line but fill up the 500px width of the ul based on how many li's are present?

For example.

<ul>
   <li>test</li>
</ul>

the li would take up the entire 500px

<ul>
   <li>test</li>
   <li>test</li>
</ul>

the 2 li would split the width. essentially each 250px each

<ul>
   <li>test</li>
   <li>test</li>
   <li>test</li>
</ul>

would split it 3 ways etc...

thank you!

Upvotes: 0

Views: 742

Answers (2)

coyotebush
coyotebush

Reputation: 653

When Flexbox becomes finalized/better implemented, it would provide a nice option.

fiddle using an old-style syntax supported by current Gecko/Webkit.

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220076

ul {
    width: 500px;
    display: table;
}

li {
    display: table-cell;
}

Here's the fiddle: http://jsfiddle.net/WhbuQ/

Upvotes: 5

Related Questions