Question

我正在尝试将div浮动到bootstrap类（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

编辑：通过将我和另一个包裹起来，我已经实现了我正在寻找的视觉效果，我正在应用手风琴切换风格。这样做的缺点是现在只有现在正在切换手风琴，而不是整个标题。

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

Updated fiddle

Answer 1

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

b）在<div />之前移动浮动的.accordion-toggle。 fiddle

BTW：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%;
}

使用display：block元素浮动内联

1 个答案: