CODEWITHSUNDEEP
css
Aurange
Aurange

Reputation: 963

Same width for all list items within an unordered list set to the width of the longest content

Is there a way to do this without the use of JavaScript? If the question is unclear... I have an unordered list which includes several list items their content width are all different. I want all the widths to be set to the longest content width of the list items.

Upvotes: 0

Views: 1536

Answers (4)

omma2289
omma2289

Reputation: 54619

You can set the list display to inline-block or table to make it fit its contents rather than act as a block:

ul {
    display: inline-block;
}

Demo fiddle

Upvotes: 1

Alex Art.
Alex Art.

Reputation: 8781

li
{
    background:Red;
}
ul
{
    display:inline-block;
}

Here is fiddle

Upvotes: 1

Anshad Vattapoyil
Anshad Vattapoyil

Reputation: 23463

Try this html,

<ul>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text.
    </li>
    <li>
        This is sample text with longest content in unordred list.
    </li>
</ul>

With CSS,

ul {
    display: inline-block;
}

li{
    border:1px solid orange;
    list-style:none;
    margin-bottom:5px;
    padding:10px;
}

Demo

Upvotes: 1

Imran Omer
Imran Omer

Reputation: 701

Use 

 display: block;
 width: 100%;

in your CSS class.

Upvotes: 1

Related Questions