title: set div width to ul list size
body: <p>I Have:</p>
  
  <pre><code>&lt;div class="div1"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;input type="button" value="val1"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
          &lt;li &gt;&lt;input type="button" value="val2"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.div1{
      position:absolute;
      height:30px;
      width:auto;
      top:50%;
      margin-top:-15px;
      left:50%;
      transform:translate(-50%);
      border:1px solid #f7f7f7;
      display: inline-block; //inline
  }
  .ul li{
      margin-right:5px;
      box-shadow: 2px 3px 3px #666666;
      border-radius: 2px;
  }
  </code></pre>
  
  <p>I simply want the width of <code>div1</code> to extend based on amount of <code>li</code> size (FYI: li amount is random).</p>
  
  <p>If I set div <code>width: 100px // or something</code> then <code>li</code> overflows the div container. and if i try to set div <code>width: auto</code> still the same.</p>
  
  <p>Also I noticed one thing in my browser inspect mode, that if i remove left:50% then it works just fine, but the position of the box come to left and I need to keep the element centered</p>
  
  <p>All replies are much appreciated :)</p>