html - 如何在 CSS 中绘制特定的边框？

Question

我想制作这样的边框:

之前:

我希望之后看起来像这样:

“Lable”是一个 li 标签，例如:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>           
</ul>

下面的框是一个 div 元素，如下所示:

<div class="main-container">

</div>

我试过这样的:

li{
    border-top: 1px solid red;
    border-left: 1px solid red;
    border-right: 1px solid red;
}

div{
    border: 1px solid red;
}

然而，这两个边界重叠，令人作呕。

我想避免使用 table-cell 方法，因为这是不可能的通过错误地计算面积来设计响应式(Reactive)。

Answer 1

将 border-bottom:1px white solid; 应用于您的事件标签并增加其 padding-bottom。现在用 z-index 调整它们。就是这样:)

请参阅下面的链接。

https://jsfiddle.net/vaishuk/kpova28h/