title: How to make a block element adjust to the size of what is inside it?
body: <p>If I have this HTML:</p>
  
  <pre><code>&lt;li class="name"&gt;hi&lt;/li&gt;
  &lt;li class="name"&gt;hello&lt;/li&gt;
  &lt;li class="name"&gt;wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!&lt;/li&gt; 
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>li.name{
      border: 1px solid #A38870;
      background-color: #FA682D;
      list-style: none;
      margin: 15px;
      padding: 5px;
  }
  </code></pre>
  
  <p>The background extends all the way across the page like <a href="http://www.use.com/images/s_2/now_2afd33f14c0fd298d683_1.jpg" rel="noreferrer">this</a>.</p>
  
  <p>How can I make the background adjust to the size of the text like <a href="http://www.use.com/images/s_2/goal_c5365e52c806ffdd05e0_1.jpg" rel="noreferrer">this</a> (without explicitly setting the width for each list element)?</p>