首页 文章

使用display：block元素浮动内联

提问于
浏览 次
0

我试图将一个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

css twitter-bootstrap

1 回答

  • 2

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

    b）在 .accordion-toggle 之前移动浮动的 <div /> . 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%;
}
    回复于

相关问题