消除重叠的div

Question

我有一个约会列表，并且有一个可折叠的按钮来显示/隐藏更多细节。除了可折叠的面板之外，我还想加入一个正负号，当点击时，这个符号就会变形。我在另一个堆栈溢出条目中找到了该代码，并在下面的手风琴切换类中表示：

<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值。如果要将偏移量应用于两行文本，请将规则添加到

取而代之的是.accordion-toggle > .text-muted。