CSS - Make list items have a background-color and a width equal to their content

Question

li {
  background-color: yellow;
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

I want to make the list items have both a background-color and a width no longer than their content. But if I add the display: inline-block property to them, then they all will appear next to each other. How could I fix this?

G-Cyrillus · Accepted Answer · 2020-11-20T01:13:23.547

2

li {width:max-content;}

might be what you look for :

li {
  background-color: yellow;
}

li {
  width: max-content;
  max-width: 90%;/*optionnal but usefull,  avoids them to grow too wide */
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>  
  <li>Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk &</li>
</ul>

see this post to find out more : How do min-content and max-content work?

edited Nov 20 '20 at 01:13

answered Nov 13 '20 at 18:34

G-Cyrillus

101,410
14
105
129

Tbh, I didn't even know `max-content` exists. Why isn't it shown as a value in the `width` property here https://www.w3schools.com/cssref/pr_dim_width.asp – darkchampionz Nov 13 '20 at 19:24
@darkchampionz because that site is to *not use*. Check here: https://developer.mozilla.org/en-US/docs/Web/CSS/width – Temani Afif Nov 13 '20 at 20:06
Hello! The solution seemed to work at first but, as it turned out, it does not wrap the text. Is there any way to fix this too? Thanks – darkchampionz Nov 20 '20 at 01:04
@darkchampionz did you also set the max-width as in the example ? I added a longer li to show that it wraps ;) – G-Cyrillus Nov 20 '20 at 01:11

score 2 · Answer 2 · answered Nov 13 '20 at 18:41

2

You can use span inside li tags

span {
  background-color: yellow;
}

<ul>
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ul>

answered Nov 13 '20 at 18:41

akhtarvahid

9,445
2
26
29

score 1 · Answer 3 · answered Nov 13 '20 at 18:36

1

Easiest way is to put the list item in a span.

<ul>
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ul>

li span {
  background-color: yellow;
}

answered Nov 13 '20 at 18:36

peamanschesthair

69
8

score 0 · Answer 4 · answered Nov 13 '20 at 20:10

0

The old float can do it here:

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

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

answered Nov 13 '20 at 20:10

Temani Afif

245,468
26
309
415

CSS - Make list items have a background-color and a width equal to their content

4 Answers4