摆脱重叠的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
。
我有一个约会列表,并且有一个可折叠的切换按钮,可以查看 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
。