Question

我有一些引导标签，它与我的容器内的右侧对齐：

这是代码：

<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;将它们向右浮动。由于您希望第一个列表项填满整个空间，因此您必须将其放在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;
}

查看this fiddle.

如何让我的左侧标签向左浮动，但将空白区域填充到向右浮动的其他标签？

1 个答案: