title: how to set width of each 'LI' element to its 'content size' in jquery?
body: <p>I am using mdbootstrap3 tab.
  I want set each li width to its content. for example I have three li.</p>
  
  <p>first li content) Practice Timing<br>
  second li content) Categories<br>
  third li content) Default Setting</p>
  
  <p>I try this code get all li width</p>
  
  <pre><code>&lt;ul class="nav nav-tabs tabs-4 cal-tab"&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#parc-time"&gt;&lt;span&gt;Practice Timing&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="cate"&gt;Categories&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="defa-sett"&gt;Default Setting&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var totalWidth = 0;
  $(".cal-tab li").each(function() { totalWidth += $(this).outerWidth(); });
  </code></pre>
  
  <p>Thankes in advance   </p>