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

Question

我正在使用Angular Bootstrap UI tabset指令，并且在使用奇怪的CSS时遇到了一些麻烦。这是我的HTML and also a plunker。为什么div＃内容包装？如何让它直接显示在它所属的标签下方？

<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元素上放置一个显示样式：inline-block似乎可以解决问题。