How to make a block element adjust to the size of what is inside it?

Question

If I have this HTML:

<li class="name">hi</li>
<li class="name">hello</li>
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li> 

And this CSS:

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;
}

The background extends all the way across the page like this.

How can I make the background adjust to the size of the text like this (without explicitly setting the width for each list element)?

Answer 1

I think the best way is to use browser-specific CSS, writing a line for each browser like Justin Geeslin explained here :

Is there a css cross-browser value for "width: -moz-fit-content;"?

p{
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}