Angular Bootstrap 选项卡导致奇怪的包装

Question

我正在使用 Angular Bootstrap UI tabset 指令并且遇到了一些奇怪的 CSS 问题。这是我的 HTML，and also a plunker。为什么 div#content 包装？如何让它直接显示在它所属的选项卡下方？

<div id="left">
  floating left div with static height and width
</div>

<div id="right">
  <div>standard div with width=100%.  presence of tabs is screwing up content below them</div>
  <tabset>
    <tab>
      <tab-heading>Tab 1</tab-heading>
    </tab>
    <tab>
      <tab-heading>Tab 2</tab-heading>
    </tab>
  </tabset>
  <div id="content">
    Why is this wrapping below???
  </div>
</div>

编辑： 看起来 CSS 类“nav”有一个规则“.nav:after { clear:both; }”正在清除左浮动并导致问题。但我仍然不知道如何解决这个问题。

Answer 1

在 tabset 元素上设置 display: inline-block 样式似乎可以解决问题。