html - CSS：如何创建一个100% 宽度

Question

我无法让我的水平<ul>选项卡列表按我想要的方式工作。<li>应该填充class ltab100% 的可用空间。

<style>
  ul.tabs{
    width:100%;
    display: table;
    white-space: nowrap;
  }

  ul.tabs li{
    float:left;
    white-space:nowrap;
    display:inline-block;
    font-weight: bold;
    padding:4px 8px;
    text-align:center;
    font-size:12px;
    margin-right:4px;
    border:1px;
  }

  ul.tabs li.ltab{
    white-space:nowrap;
  }     
</style>

HTML：

<ul class="tabs">
  <li><a href='#'>Tab 1</a></li>
  <li><a href='#'>Tab 2</a></li>
  <li class="ltab">&nbsp;</li>
</ul> 

添加width:100%到ul.tabs li.ltab导致此选项卡移动到下一行。任何想法如何解决这个问题？

Answer 1

你display:table是一个好的开始，唯一剩下的就是设置display:table-cell' lis 并强制第一个宽度为最小宽度，width:1px同时允许最后一个填充所有剩余空间width:100%。

JSFiddle：http: //jsfiddle.net/dqNLR/1/