How can I constrain a
's width to the width of the widest item?

Question

Given the following markup:

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
</ul>

Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.

I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?

Is there any reason you can't give the list a specified width? — cowgod, Oct 31 '08 at 01:22

score 31 · Accepted Answer · edited Jan 04 '12 at 13:43

31

Adding ul {float: left; } style will force your list into preferred width, which is what you want.

Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.

edited Jan 04 '12 at 13:43

Stefan

14,530
4
55
62

answered Oct 31 '08 at 00:56

buti-oxa

11,261
5
35
44

9

any way then to center this list? – Brandon Frohbieter Mar 05 '11 at 04:33
1

See https://stackoverflow.com/questions/1708054/center-ul-li-into-div for how to do that, but you should avoid `float` as the solution here anyway, even circa '08 or '11. – TylerH Dec 10 '19 at 15:35

score 3 · Answer 2 · answered Oct 31 '08 at 00:40

3

Can you do it like this?

<ul>
   <li>apple</li>
   <li><span class="highlight">orange</span></li>
   <li>pear</li>
</ul>

answered Oct 31 '08 at 00:40

BoltBait

11,361
9
58
87

nickf · Answer 3 · 2008-10-31T01:20:29.957

Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.

<ul>
    <li>apple</li>
    <li><span class="highlight">orange</span></li>
    <li>pear</li>
</ul>

My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:

$('li.highlight').wrapInner("<span></span>");

and use the CSS:

li.highlight span { background-color: #f0f; }

edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:

    - short
    - items ********************
    - here
    - and then a really long one

...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.

score 0 · Answer 4 · answered Apr 20 '15 at 16:44

Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.

Try it out

See documentation on float and clear.

score 0 · Answer 5 · answered Sep 08 '15 at 23:34

The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block

   <div id='dropdown_tab' style='display: inline-block'>dropdown
        <ul id='dropdown_menu' style='display: none'>
            <li>optoin 1</li>
            <li>optoin 2</li>
            <li id='option_3'>optoin 3
                <ul id='dropdown_menu2' style='display: none'>
                    <li>second 1</li>
                    <li>second 2</li>
                    <li>second 3</li>
                </ul>
            </li>
        </ul>
    </div>

TylerH · Answer 6 · 2020-07-30T13:55:53.163

None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.

The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.

To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:

ul {
    display: inline-block;
    background-color: green;
}
.highlight {
    background-color: orange; /* for demonstration */
    padding: 15px; /* for demonstration */
}

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
   <li>banana</li>
</ul>

How can I constrain a 's width to the width of the widest item?

6 Answers6

How can I constrain a
's width to the width of the widest item?