Question

我有以下plnkr：

https://plnkr.co/edit/hh2ItK6Jgcf0AC5PU9Tl?p=preview

.right {
  position: absolute;
  right: 30px;
}

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="true">Industry</a>
      </h4>
    </div>
    <div class="panel-collapse collapse in" id="collapseOne" aria-expanded="true" style="">
      <div class="panel-body">
        <p class="selection">
          <label for="industry1">Industry 1</label>
          <span style="position: absolute; right: 30px;">
            <input class="category" id="industry1"
                   name="check" type="checkbox" value="industry-1" />
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

我想要实现的是手风琴下拉列表，其中包含选项和复选框列表。

正在发生的事情是，当手风琴正在展开/折叠时，复选框会移动。我想要的是在展开/折叠阶段不要移动复选框，使其始终位于距右侧30px处。

实现这一目标的CSS魔法是什么？

Answer 1

正如我在评论中所指出的那样，主要的转变是由于.panel-title内的浮动没有被清除。

我认为我最喜欢的解决方案是将.panel-heading a:after更改为position: absolute，然后完全删除浮动。

.panel-heading a:after {
    font-family: 'FontAwesome';
    content: "\f106";
    color: #fff;
    background-color: #3593d0;
    padding: 0 10px;
    line-height: 37.6px;
    position: absolute;
    top: 0;
    right: 0;
}

您需要将position: relative添加到其父级，以便它绝对位于父元素中。

.right类也会导致小跳跃。这有助于以下方式之一：

1 - 将position: relative添加到父元素，以便.right绝对位于该元素内，而不是其他元素。

.selection {
    position: relative;
}

.right {
    position: absolute;
    right: 30px;
}

2 - 将.right更改为float: right而非position: absolute。

全部放在一起：

.selection {
    position: relative;
}

.right {
    position: absolute;
    right: 30px;
}

/* OR just .right { float: right; } */


/* -------- */

.panel-heading {
    position: relative;
}

.panel-heading a:after {
    font-family: 'FontAwesome';
    content: "\f106";
    color: #fff;
    background-color: #3593d0;
    padding: 0 10px;
    line-height: 37.6px;
    position: absolute;
    top: 0;
    right: 0;
}

.panel-heading a.collapsed:after {
    content: "\f107";
}

在bootstrap手风琴中移动具有绝对位置的复选框

1 个答案: