html - CSS:如何创建宽度为 100% 的 <li>

Question

我无法获得我的水平 <ul>选项卡列表以我想要的方式工作。 <li>与 class ltab应该填满 100% 的可用空间。

<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 是一个好的开始，唯一剩下的就是在 li 上设置 display:table-cell 和使用 width:1px 强制第一个宽度最小，同时允许最后一个使用 width:100% 填充所有剩余空间。

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