我希望这个蓝色的 ul
边框像在这个黑色 li
元素下面的中心,并且有 50% 的子宽度,但我不知道如何我能做到吗?我试过 :before
但似乎它只适用于一个“ul”元素。
#one{
width: 300px;
height: 600px;
background-color: rgba(0, 0, 0, 0.4);
}
ul{
list-style-type: none;
}
.a{
border-bottom: 4px solid blue;
}
.b
{
width: 200px;
height: 100px;
background-color: black;
margin: 20px;
}
<div id="one">
<ul class="a">
<li class="b"></li>
<li class="b"></li>
</ul>
<ul class="a">
<li class="b"></li>
<li class="b"></li>
</ul>
</div>
最佳答案
如果我正确理解你的问题,你可以删除你的边框样式,并在它的位置使用它:
li {
position: relative;
}
li:last-of-type:after {
content: '';
position: absolute;
left: 25%;
width: 50%;
bottom: -12px;
border-bottom: 4px solid blue;
}
片段:
#one{
width: 300px;
height: 600px;
background-color: rgba(0, 0, 0, 0.4);
}
ul{
list-style-type: none;
}
.b
{
width: 200px;
height: 100px;
background-color: black;
margin: 20px;
}
li {
position: relative;
}
li:last-of-type:after {
content: '';
position: absolute;
left: 25%;
width: 50%;
bottom: -12px;
border-bottom: 4px solid blue;
}
<div id="one">
<ul class="a">
<li class="b"></li>
<li class="b"></li>
</ul>
<ul class="a">
<li class="b"></li>
<li class="b"></li>
</ul>
</div>
关于html - ul 边框长度为 li 元素的一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31254942/