Question

我无法让我的水平<ul>标签列表以我想要的方式工作。带<li>的{{1}}应填充100％的可用空间。

class ltab

HTML：

<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>

将<ul class="tabs"> <li><a href='#'>Tab 1</a></li> <li><a href='#'>Tab 2</a></li> <li class="ltab"> </li> </ul>添加到width:100%，导致此标签移至下一行。任何想法如何解决这个问题？

Answer 1

您的display:table是一个良好的开端，唯一剩下的就是在display:table-cell上设置li并使用width:1px将第一个强制为最小宽度允许最后一个用width:100%填充所有剩余空格。

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

CSS：如何创建宽度为100％的<li> </li>

1 个答案: