代码之家  ›  专栏  ›  技术社区  ›  user9526133

显示属性-表格、行、单元格-如何将边框添加到当前显示为行的每个LI的底部?

  •  0
  • user9526133  · 技术社区  · 7 年前

    我有一个无序的列表,我显示为一个表,这样我可以在每个li标记之前插入一个自定义windgbat。该列表也没有缩进,但与正常段落的左侧齐平。

    如何在每个li的底部添加边框?现在,每个li都显示为表格行?

    我试图以各种方式将以下内容添加到下面的代码中,但它不会显示边框。

    边框底部:1px实心#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:"\261e";
    color: #8d8d8d;
    text-align: right;
    padding-right: .6em;
    display: table-cell;
    }
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   user9526133 user9526133    7 年前

    我终于找到了一个解决方案:

    它使用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;
    }