显示 属性 - Table、行、单元格 - 如何为现在显示为一行的每个 LI 的底部添加边框？
Display Property - Table, Row, Cell - How to Add Border to Bottom of Each LI now Being Displayed as a Row?
我有一个无序列表，我将其显示为 table，因此我可以在每个 li 标签之前插入自定义 windgbat。此列表也没有缩进，而是与正常段落的左侧齐平。
现在每行都显示为 table 行，如何在每个行的底部添加边框？
我尝试以各种方式将以下内容添加到下面的代码中，但它不会显示边框。
border-bottom: 1px solid #25a186;
.post-body ul{
list-style-type: none;
margin-left: 0px;
padding-left: 0em;
text-indext: -1em;
display: table;
}
.post-body li{
display: table-row;
}
.post-body ul li::before{
content:"1e";
color: #8d8d8d;
text-align: right;
padding-right: .6em;
display: table-cell;
}
我终于找到了解决办法：
它使用 boxshadow 来模拟边框并忽略第一个 li。
前两种样式适用于可能不支持 CSS3 且现代浏览器可能不需要的浏览器。
.post-body ul li + li{
-moz-box-shadow: 0 -1px 0 #8d8d8d;
-webkit-box-shadow: 0 -1px 0 #8d8d8d;
box-shadow: 0 -1px 0 #8d8d8d;
}
我有一个无序列表，我将其显示为 table，因此我可以在每个 li 标签之前插入自定义 windgbat。此列表也没有缩进，而是与正常段落的左侧齐平。
现在每行都显示为 table 行，如何在每个行的底部添加边框？
我尝试以各种方式将以下内容添加到下面的代码中，但它不会显示边框。
border-bottom: 1px solid #25a186;
.post-body ul{
list-style-type: none;
margin-left: 0px;
padding-left: 0em;
text-indext: -1em;
display: table;
}
.post-body li{
display: table-row;
}
.post-body ul li::before{
content:"1e";
color: #8d8d8d;
text-align: right;
padding-right: .6em;
display: table-cell;
}
我终于找到了解决办法：
它使用 boxshadow 来模拟边框并忽略第一个 li。
前两种样式适用于可能不支持 CSS3 且现代浏览器可能不需要的浏览器。
.post-body ul li + li{
-moz-box-shadow: 0 -1px 0 #8d8d8d;
-webkit-box-shadow: 0 -1px 0 #8d8d8d;
box-shadow: 0 -1px 0 #8d8d8d;
}