如何使左选项卡向左浮动，但将空白区域填充到其他选项卡向右浮动？

Question

我有一些引导程序选项卡，它们与我的容器内的右侧对齐：

https://jsfiddle.net/yc2dxnev/

这是代码：

<div class=container>
    <ul id="tabs" class="tabs-right tabs">
            <li class="banana active"><a>Banana</a></li>
            <li class="monkey"><a>Monkey</a></li>
            <li class="woods"><a>Woods</a></li>
        </ul>
</div>

<style>
ul.tabs a {
  display: block;
  outline: none;
}

ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;

}

ul.tabs>li {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  margin-bottom: -1px;
}

我想要做的是保持选项卡在右侧，仅使左侧选项卡在左侧，但同时将区域填充到下一个选项卡。 很难解释，所以我发布了一张图片：

http://s16.postimg.org/bhr4qzt51/002.jpg

我不知道如何实现它，也许您知道一个窍门。

Answer 1

您的右侧标签应该正确，因此请使用float:right;将其向右float:right; 。 由于要使第一个列表项充满整个空间，因此必须将其放在ul的末尾并添加overflow:hidden; 对此。 您的代码如下所示：

<div class="container">
    <ul id="tabs" class="tabs-right tabs" data-tabs="tabs" style="">
        <li class="monkey"><a>Monkey</a></li>
        <li class="woods"><a>Woods</a></li>
        <li class="banana active"><a>Banana</a></li> // move this li item to the end
    </ul>
</div>

ul.tabs>li.active {
    border-bottom-color: #FFF;
    background-color: #FFF;
    overflow:hidden;
}

.monkey, .woods{
    float:right;
}

看看这个小提琴。