列出项目垂直对齐：在元素之后

Question

我试图实现我所做的这种设计。我用一个元素解决方案创建了边框，但问题是标题停靠在它们之上

守则

ul {
  width: 150px;
}

li {
  text-decoration: none;
  list-style-type: none;
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

li:after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 0;
  height: 1px;
  width: 50%; /* or 100px */
  border-bottom: 1px solid #000;
}

<ul>
  <li>test</li>
  <li>test</li>
</ul>

Answer 1

这里使用css中的自定义更改，您可以得到您想要的内容

ul{
 width: 150px;
    }

    li{
            text-decoration: none;
            list-style-type: none;
            position: relative;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
            line-height:20px;
            vertical-align:middle;
        }

  li:after{  content : "";
  position: absolute;
  left    : 25%;
  bottom  : -12px;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid #000;
}

<ul>
    <li>test</li>
    <li>test</li>
       <li>test</li>
    <li>test</li>
       <li>test</li>
    <li>test testtesttesttesttesttest</li>

</ul>

Answer 2

使用此

更新您的li样式

li {
    text-decoration: none;
    list-style-type: none;
    position: relative;
    text-align: center;
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
    line-height: 30px;
    padding: 10px 0;
}

只添加了填充而不是边距和行高。

请查看演示https://jsfiddle.net/wfo2dkh1/