摆脱重叠的div

get rid of overlapping divs

我有一个约会列表,并且有一个可折叠的切换按钮,可以查看 show/hide 更多详细信息。除了可折叠的面板,我还想加入一个 plus/minus 标志,点击后会变形。我在另一个 Whosebug 条目中找到了该代码,并在下面的 accordion-toggle class 中表示:

<div style="margin-right:auto;">
   <a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
   <span class="h4 m-l-xs" >{{item.id}}: {{item.name}}</span>
   <i ng-if="item.required==true" class="fa fa-exclamation-circle mandatory m-l-xs"></i>
   </a>
   <div>
      <small class="text-muted"><span class="m-l-xs">{{item.description}}</span></small>
      <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">{{item.duration}} hour(s)</span></small>
   </div>
</div>

.flex {
  display: flex;
  align-items: center;
}

.accordion-toggle {
  position: relative;
}

.accordion-toggle::before,
.accordion-toggle::after {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 4px;
  background-color: #000;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 0;
}
.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
}
.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

我的问题是手风琴开关的位置与我的列表重叠。我已经尝试了各种各样的事情,但无法弄清楚如何将列表推到右边以便为 plus/minus 标志腾出空间。上面的 CSS 对我来说相当高级,所以我什至不确定 plus/minus 符号是如何创建的。任何指导表示赞赏!

您应该只需要向手风琴中的 <span> 元素添加一些 margin-left

这可以通过以下方式完成:

.accordion-toggle > span {
  margin-left: 20px;
}

并在下面看到:

.flex {
  display: flex;
  align-items: center;
}

.accordion-toggle {
  position: relative;
}

.accordion-toggle::before,
.accordion-toggle::after {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 4px;
  background-color: #000;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 0;
}

.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
}

.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.accordion-toggle > span {
  margin-left: 20px;
}
<div style="margin-right:auto;">
  <a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
    <span class="h4 m-l-xs">{{item.id}}: {{item.name}}</span>
    <i ng-if="item.required==true" class="fa fa-exclamation-circle mandatory m-l-xs"></i>
  </a>
  <div>
    <small class="text-muted"><span class="m-l-xs">{{item.description}}</span></small>
    <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">{{item.duration}} hour(s)</span></small>
  </div>
</div>

请注意,根据您的实际字体大小和显示,您可能需要稍微调整一下 margin-left 值。如果您希望偏移量应用于两行文本,请将规则添加到
.accordion-toggle > .text-muted