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

我有一些引导选项卡，它们在容器内向右对齐：

代码如下：

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

我不知道如何实现它，也许你知道一个诀窍。
你的右选项卡应该是正确的，所以使用
float:right。由于您希望第一个列表项填满整个空间，因此必须将其放在
ul
的末尾，并添加
溢出：隐藏到它。您的代码如下所示：

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



请创建当前输出的演示，以便我们提供帮助。您好，我将第一张图像更新为小提琴代码。