摆脱重叠的div

Question

我有一个约会列表，并有一个可折叠的切换来显示/隐藏更多细节。除了可折叠面板，我还想要加入一个加号/减号，点击时会变形。我在另一个stackoverflow条目中找到了代码，并在下面的accordion-toggle类中表示：

<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);
}

我的问题是手风琴切换的位置与我的列表重叠。我已经尝试了各种各样的东西，但无法弄清楚如何将列表推到右边以便为加号/减号留出空间。上面的CSS对我来说相当先进，所以我甚至不确定如何创建加号/减号。任何指导表示赞赏！

Answer 1

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

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

.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值进行一些播放。如果您希望将偏移量应用于两行文本，请将规则添加到<{1}}。