CODEWITHSUNDEEP
jquerycss
kfirba
kfirba

Reputation: 5441

Forcing <li>'s width to be the same as it's content

I got an unordered list (UL) which obviously contains list items (li).

The problem with that is, the li tag width is the same as it's parent width. I havent assigned a width to the ul tag, but I have assigned a width to the DIV which contains the UL. The width that i've assigned is 600px, therefore, my li tags are now 600width, doesnt matter if it has only 2 words in it.

How do I make the li be the same width as it's content?

Thanks!

Upvotes: 1

Views: 4432

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Do you want like this? demo

css

div{width: 600px; background-color: gray;}
ul{list-style: none; margin: 0; padding: 0;}
li{background-color: red; display: table-row;}

html

<div>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list three 3</li>
    </ul>
</div>

You can also do as this demo

li{background-color: red; width: auto; display: table;}

I've alos found out another method. See this demo

ul{background-color: gray; list-style: none; margin: 0; padding: 0; }
li{background-color: red; display: inline-block; width:100%;}

Upvotes: 2

472084
472084

Reputation: 17885

By default div, ul & li are all display:block meaning width:100%. To make them shrink to their content they would need to be inline-block, use this class on them to achieve this..

.inline_block{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

EDIT: Found a better way of doing it.

li{
    float:left;
    clear:left;
    background-color:red;
}

http://jsfiddle.net/LhzWe/

Upvotes: 4

Related Questions