Html 边界与li的子级和子级重叠

我想用ul li开发一个有边框的盒子

我已经应用了边框，但问题是，当我为li应用边框底部和边框顶部时，第一个1px边框底部与第二个li边框顶部重叠，看起来像2px边框

我的代码在下面

.main权限框{
右边框：1px实心#555；
边框底部：1px实心#555；
左边框：1px实心#555；
宽度：380px；
保证金：0自动；
边缘底部：20px；
}
.主权限框li{
列表样式类型：无；
填充：8px；
边框顶部：1px实心#555；
边框底部：1px实心#555；
}
.main权限框>ul>li{
边框底部：1px实心#555；
}
.main权限框>li:第一个子项{
边框顶部：1px实心#555；
}
.主权限框ul li{
左边框：1px实心#555；
}
.main权限框>ul{
填充：0；边距：0；
}
.许可文本{
左侧填充：25px；
}

售前



时间表咨询



选择一


选择二






时间表咨询




顾客

将

页边距底部

应用于列表元素。代码如下：

.main权限框{
右边框：1px实心#555；
边框底部：1px实心#555；
左边框：1px实心#555；
宽度：380px；
保证金：0自动；
边缘底部：20px；
}
.主权限框li{
列表样式类型：无；
填充：8px；
边框顶部：1px实心#555；
边框底部：1px实心#555；
}
.main权限框>ul>li{
边框底部：1px实心#555；
边缘底部：-1px；
}
.main权限框>li:第一个子项{
边框顶部：1px实心#555；
}
.主权限框ul li{
左边框：1px实心#555；
边缘底部：-1px；
}
.main权限框>ul{
填充：0；边距：0；
}
.许可文本{
左侧填充：25px；
}

售前



时间表咨询



选择一


选择二






时间表咨询




顾客

将

页边距底部

应用于列表元素。代码如下：

.main权限框{
右边框：1px实心#555；
边框底部：1px实心#555；
左边框：1px实心#555；
宽度：380px；
保证金：0自动；
边缘底部：20px；
}
.主权限框li{
列表样式类型：无；
填充：8px；
边框顶部：1px实心#555；
边框底部：1px实心#555；
}
.main权限框>ul>li{
边框底部：1px实心#555；
边缘底部：-1px；
}
.main权限框>li:第一个子项{
边框顶部：1px实心#555；
}
.主权限框ul li{
左边框：1px实心#555；
边缘底部：-1px；
}
.main权限框>ul{
填充：0；边距：0；
}
.许可文本{
左侧填充：25px；
}

售前



时间表咨询



选择一


选择二






时间表咨询




顾客

如果这是您想要的，我倾向于使用表而不是无序列表。但是，您可以通过使用

outline

样式而不是边框来获得想要的效果。为了使这些轮廓重叠，您需要在框中添加额外的1px边距，并且您需要进行更多的调整以使内容沿左侧对齐，但这应该是可行的：

.main权限框{
左边框：1px实心#555；
宽度：380px；
保证金：0自动；
边缘底部：20px；
}
.主权限框li{
列表样式类型：无；
填充：8px；
保证金：1px；
外形：1px实心#555；
}
.main权限框>ul>li{
左边距：0；
}
.main权限框>li:第一个子项{
}
.主权限框ul li{
}
.main权限框>ul{
填充：0；边距：0；
}
.许可文本{
左侧填充：25px；
}

售前



时间表咨询



选择一


选择二






时间表咨询




顾客

如果这是您想要的，我倾向于使用表而不是无序列表。但是，您可以通过使用

outline

样式而不是边框来获得想要的效果。为了使这些轮廓重叠，您需要在框中添加额外的1px边距，并且您需要进行更多的调整以使内容沿左侧对齐，但这应该是可行的：

.main权限框{
左边框：1px实心#555；
宽度：380px；
保证金：0自动；
边缘底部：20px；
}
.主权限框li{
列表样式类型：无；
填充：8px；
保证金：1px；
外形：1px实心#555；
}
.主权限框
ul > li{ border-bottom: 1px solid #555; }
ul > li:last-child{ border-bottom: none; }
ul > li:first-child{ border-top: 1px solid #555; }
ul ul > li:first-child{ border-top: none; }