背景和边框wrap文本根据最长的行 CSS

2022-01-28 05:20:21 标签 htmlcssborderbackground-color

我试图包装一个段落和UL与边界的4行,并给它黑色的背景。

我希望边框和背景包装所有的文本根据长度最长的线我能做这一行的时间,但它意味着没有背景颜色之间的线,而我想让背景和边框包裹一起的所有文本。

不知道该怎么做。

这是我的HTML代码

<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>

这是我的CSS代码:

.commentBorder{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder1{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder2{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder3{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder4{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}

你是说像这样的事吗?:

.parent {
    width: fit-content;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    margin: 0 auto;
}
<div class="parent">
<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>
</div>

不幸的是,没有“干净”的方法来实现这一点,除非您添加一个父层来包装整体。

请注意,我为它添加了width: fit-content,以便它适应最宽的元素。

# # #

ul {
 background-color: rgba(0,0,0,0.5);
 border: 1px solid black;
}

我认为你想要整个ul的背景色,你可以删除每个li的背景色

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码