代码之家  ›  专栏  ›  技术社区  ›  Dave

消除重叠div

  •  0
  • Dave  · 技术社区  · 7 年前

    我有一个约会列表,并且有一个可折叠的切换,可以显示/隐藏更多详细信息。除了可折叠面板之外,我还想加入一个加号/减号,当点击时可以变形。我在另一个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对我来说相当高级,所以我甚至不确定加号/减号是如何创建的。感谢您的指导!

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Obsidian Age    7 年前

    你只需要添加一些 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>

    请注意,您可能想玩一下 左边距 基于实际字体大小和显示的值。如果要将偏移量应用于两行文字,请将规则添加到
    .accordion-toggle > .text-muted 相反