title: How to change the width of css tab according to length of alphabet?
body: <p>It's a tab menu of css. I tried to write a long name in one tab so its out its position 
  you can check the images on following links:</p>
  
  <p>This is the orignal one:
   <img src="https://i.stack.imgur.com/4tgSG.png" alt="http://innovativeartz.com/problems/orignal.png"> </p>
  
  <p>When I changed in css
  <img src="https://i.stack.imgur.com/FBkhZ.png" alt="enter image description here"></p>
  
  <pre><code>.tabs {width:100%;overflow:auto;}
  .tabs li {float:left;padding-right:1px;}
  .tabs .end {padding:0}
  .tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
  .tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
  .tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/PIE.htc);position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}
  </code></pre>
  
  <p>and this is the HTML</p>
  
  <pre><code> &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a href="#" id="changeText"&gt;inclusive Class&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="changeText2"&gt;inclusive Class&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="changeText3"&gt;inclusive Class&lt;/a&gt;&lt;/li&gt;
          &lt;li class="end"&gt;&lt;a href="#" id="changeText5"&gt;inclusive Class&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Please any one help me out how to look its original bit with long text?</p>