title: Buidling navigation bar - LI tag space between words takes to next line
body: <p>I am building a navigation bar for my website . This navigation bar elements are  dynamic . To fit the elements automatically I have the below code</p>
  
  <pre><code>.mytaboptions {
      position: relative;
      margin: 0px 0 10px 0;
      font-weight: bold;
      font-family: arial;
      font-size: 11px;        
      background-color: #305081;    
  }
  
  .mytaboptions li {
      list-style-type: none;
      margin: 0;
      display: table-cell;
      width: 1%;
      background-color: #305081;
  }
  
  .mytaboptions li a {
      display: block;
      text-align: center;
      line-height: 15px;
      color: #AAAAAA;
      text-decoration: none;    
  }
  
  .mytaboptions li a:hover {
      color: #00788A;
      background: #c7c7c7;
  }
  .mytaboptions li.active a {
      border-bottom: 2px solid #DADADA;    
  }
  .mytaboptions li.selected {
      background: #fafbfd;
      border-bottom:none;    
  }
  
  .mytaboptions span{
      font-size: 10px;
      font-style:italic;
      color: #AAAAAA;
  }
  </code></pre>
  
  <p>This works fine . But if I have space between words in a tab ( <code>&lt;li&gt;</code> tag ) it splits into two lines . If I add <code>&amp;nbsp;</code> it works fine .</p>
  
  <p>Please have a look at the below fiddle what I am talking</p>
  
  <p><a href="http://jsfiddle.net/MJEKa/" rel="nofollow">http://jsfiddle.net/MJEKa/</a></p>
  
  <p>You can see I used <code>&amp;nbsp;</code> in the first nav bar and it looks good . But the second one you see it splits . ( You can see <strong>some other option</strong> in the end )</p>
  
  <p>I am wondering any solution without using <code>&amp;nbsp;</code> ?</p>
  
  <p>Thanks for your help</p>