浮动内联显示：块元素

Question

我正在尝试将一个 div 浮动到引导类 (accordion-toggle) 的右侧，但该类具有 display: block;设置，这就是为什么我认为我遇到了问题并且它不会内联浮动。

有人可以建议我如何做到这一点吗？

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
        <div style="float: right;">RIGHT</div>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

Fiddle here

编辑： 通过将 and my 包裹在 another 中，我已经实现了我正在寻找的视觉效果，我正在应用手风琴切换样式。这样做的缺点是，现在只有 激活了切换手风琴，而不是整个标题。

如果有人有更好的解决方案，请告诉我。

Updated fiddle

Answer 1

a) 将float:left 添加到.accordion-toggle（您还需要通过将clearfix 类添加到.accordion-heading 来清除这些浮点数）fiddle，或者

b) 将浮动的<div /> 移动到.accordion-toggle 之前。 fiddle

顺便说一句：display: inline 对浮动元素没有影响（好吧，除了修复一些 IE7 错误）。浮动元素的行为就好像它们有 display: block，即使它没有明确声明。

c) 我认为你想要达到的目标：http://jsfiddle.net/3tQUg/2/

.accordion-heading {
       display:table-row;
    width:100%;
}
.accordion-heading > div {
       display:table-cell;
}
.accordion-heading > a.accordion-toggle {
    display:table-cell;
    width:99%;
}