gpt4 book ai didi

html - 带填充的边框底部全宽

转载 作者:太空宇宙 更新时间:2023-11-03 22:53:20 25 4
gpt4 key购买 nike

我试图为每个列表项实现一致的边框,但就我的嵌套列表而言,我使用填充实现了嵌套。

我有以下结果,这是很正常的行为。

enter image description here

这里是 JSFiddle Example

CSS

.accordion-menu {
width: 100%;
background: #52b3d9; }

.accordion-list {
position: relative;
display: none;
width: 100%;
/* Item submodule */
/* Level modifiers */ }
.accordion-list.is-root {
display: block; }
.accordion-list.is-opened {
display: block; }
.accordion-list-item {
width: 100%;
display: block;
/* States */ }
.accordion-list-item__icon {
font-size: 1.125em;
display: inline-block;
vertical-align: middle; }
.accordion-list-item__link {
display: inline-block;
white-space: initial;
max-width: 70%;
vertical-align: middle;
color: #f7f7f7; }
.accordion-list-item__link:visited, .accordion-list-item__link:link {
color: #f7f7f7; }
.accordion-list-item__post-count {
font-size: 0.75em;
position: absolute;
display: inline-block;
right: 0;
color: #fdfdfd;
padding: 0 0.83333em;
margin-right: 0.83333em;
background: #404247;
border-radius: 10px; }
.accordion-list-item__controls {
padding: 0.625em 0.3125em;
position: relative;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
color: #f7f7f7; }
.accordion-list-item__controls:hover {
color: #FFC107; }
.accordion-list-item__controls:hover .accordion-list-item__link {
color: #FFC107; }
.accordion-list-item__controls::before {
display: inline-block;
content: '\f10c';
vertical-align: middle;
font-family: "FontAwesome"; }
.accordion-list-item__controls::after {
content: '';
display: block;
position: absolute;
border-bottom: 1px solid #c8c8c8;
bottom: 0;
width: 100%;
left: 0; }
.accordion-list-item.has-children > .accordion-list-item__controls::before {
display: inline-block;
content: '\f054';
font-family: "FontAwesome";
color: #f7f7f7; }
.accordion-list-item.has-children > .accordion-list-item__controls.is-opened::before {
content: '\f078';
color: #f7f7f7; }
.accordion-list--level-0 {
padding-left: 0; }
.accordion-list--level-1 {
padding-left: 10px; }
.accordion-list--level-2 {
padding-left: 20px; }

HTML 结构

   <div class="accordion-menu">
<ul class="accordion-list cd-accordion-menu is-root accordion-list--level-0">
<li class="accordion-list-item has-children">
<div class="accordion-list-item__controls is-opened">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Level 22
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
<ul class="accordion-list is-opened accordion-list--level-1">
<li class="accordion-list-item has-children">
<div class="accordion-list-item__controls is-opened">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Level 2
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
<ul class="accordion-list is-opened accordion-list--level-2">
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul> <!-- cd-accordion-menu -->
</div>

如何实现底部边框的全宽?

最佳答案

代替填充,您可以使用文本缩进:

.accordion-menu {
width: 100%;
background: #52b3d9;
}

ul {
padding: 0;/* reset */
}

.accordion-list {
position: relative;
display: none;
width: 100%;
/* Item submodule */
/* Level modifiers */
}

.accordion-list.is-root {
display: block;
}

.accordion-list.is-opened {
display: block;
}

.accordion-list-item {
width: 100%;
display: block;
/* States */
}

.accordion-list-item__icon {
font-size: 1.125em;
display: inline-block;
vertical-align: middle;
}

.accordion-list-item__link {
display: inline-block;
white-space: initial;
max-width: 70%;
vertical-align: middle;
color: #f7f7f7;
}

.accordion-list-item__link:visited,
.accordion-list-item__link:link {
color: #f7f7f7;
}

.accordion-list-item__post-count {
font-size: 0.75em;
position: absolute;
display: inline-block;
right: 0;
color: #fdfdfd;
padding: 0 0.83333em;
margin-right: 0.83333em;
background: #404247;
border-radius: 10px;
}

.accordion-list-item__controls {
padding: 0.625em 0.3125em 0.625em 0em;
text-indent: 0.3125em;
position: relative;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
color: #f7f7f7;
}

.accordion-list-item__controls:hover {
color: #FFC107;
}

.accordion-list-item__controls:hover .accordion-list-item__link {
color: #FFC107;
}

.accordion-list-item__controls::before {
display: inline-block;
content: '\f10c';
vertical-align: middle;
font-family: "FontAwesome";
}

.accordion-list-item__controls::after {
content: '';
display: block;
position: absolute;
border-bottom: 1px solid #c8c8c8;
bottom: 0;
width: 100%;
left: 0;
}

.accordion-list-item.has-children > .accordion-list-item__controls::before {
display: inline-block;
content: '\f054';
font-family: "FontAwesome";
color: #f7f7f7;
}

.accordion-list-item.has-children > .accordion-list-item__controls.is-opened::before {
content: '\f078';
color: #f7f7f7;
}

.accordion-list--level-0 {
}

.accordion-list--level-1 >li div {
text-indent: 10px;
}

.accordion-list--level-2 >li div {
text-indent: 20px;
}
.accordion-menu ul li .accordion-list-item__post-count {
text-indent:0;
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion-menu">
<ul class="accordion-list cd-accordion-menu is-root accordion-list--level-0">
<li class="accordion-list-item has-children">
<div class="accordion-list-item__controls is-opened">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Level 22
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
<ul class="accordion-list is-opened accordion-list--level-1">
<li class="accordion-list-item has-children">
<div class="accordion-list-item__controls is-opened">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Level 2
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
<ul class="accordion-list is-opened accordion-list--level-2">
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
<li class="accordion-list-item">
<div class="accordion-list-item__controls">
<span class="accordion-list-item__icon fa fa-cog"></span>
<a class="accordion-list-item__link" href="#0">
Sub Group 1
</a>
<div class="accordion-list-item__post-count">22</div>
</div>
</li>
</ul>
<!-- cd-accordion-menu -->
</div>

https://jsfiddle.net/1to3cLfr/4/

关于html - 带填充的边框底部全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39277920/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com