CODEWITHSUNDEEP
css
AlexStack
AlexStack

Reputation: 17431

Stretch list items <li> to fill the width of <ul>

I have an unordered list (<ul>) with various number of items (<li>) in it. I want to use one CSS styling that allows the items to stretch to the width of the list.

This is what I have:

enter image description here

This is what I want:

enter image description here

HTML:

These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

Here is the JSFiddle to get you started.

Note: I don't want to hard-code the width in CSS. Note: If you are wondering about the use-case, this is a navigation structure in a responsive design and I want the list items to always fill up the available width no matter what is the resolution.

Upvotes: 28

Views: 61354

Answers (5)

Mandalorian
Mandalorian

Reputation: 154

The easiest way:

ul {
    display: flex;
}

ul li {
    /*this instruction means "To split space between all 'li' elements evenly*/
    flex: 1;
}

More detailed about flex property you can read here.

Upvotes: 7

UBS prakash
UBS prakash

Reputation: 11

#ul1 {
display: block;
padding: 0;
list-style: none;
}

li-Class{
width: 100%
}

Note: display can be inline-block with width:100% and this code is for those who are looking to arrange li block wise.

Upvotes: 0

Victor Nol&#234;to
Victor Nol&#234;to

Reputation: 151

Easy solution with

ul {
    display: flex;
}

ul li {
    width: 100%;
}

Upvotes: 15

irejwanul
irejwanul

Reputation: 15

I've got the simplest solution. <ul style="padding: 0;"> <li style="list-style-type: none;margin:0;"></li> </ul>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Demo HI now you can do this

Used to display :table and display:table-cell

as like this

Css

ul {
    border:1px dotted black;
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: red;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: #0F0;
}

Now define your parent display:table; or width:100%; and define your child display:table-cell;

Demo

Upvotes: 44

Related Questions