Question

我正在尝试创建一个类似的布局：

One

--

Two

--

Three

布局在每个列表元素之间都有伪线。

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>

从小提琴中我可以进入，只是无法在列表元素之间平均定位。

Answer 1

从列表项（li）中删除边距，使其成为伪元素块级别，删除绝对定位，并给它一些余量。

在这里：[fiddle]

ul{
  list-style-type: none;
}
li{
  position: relative;
}
li:not(:last-child):after{
  content:"";
  display: block;
  margin: 3em 0;
  border-bottom: 3px solid blue;
  width: 30px;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

编辑：正如Drew Kennedy在对这个答案的评论中所建议的那样，我编辑了它并使其看起来对OP的要求更加完美。

Answer 2

这只给出了元素之间的界限，而不是在最后添加一行。

ul > li:not(:last-child):after {
 content:"";
  border-bottom: 3px solid blue;
  position: absolute;
  top: -15px; /* your top padding */
  left: 0;
  width: 30px;
}

Answer 3

添加左侧和底部属性fiddle

li:after {
    content: "";
    border-bottom: 3px solid blue;
    position: absolute;
    width: 30px;
    bottom: -25px;
    left: 0px;
}

Answer 4

https://jsfiddle.net/h6ffn6L0/

ul{
  list-style-type: none;
}
li{
padding-bottom:30px;
position: relative;
}
li:after{
  content:"";
  border-bottom: 3px solid blue;
  position: absolute;
  top: -15px; /* your top padding */
  left: 0;
  width: 30px;
}

Answer 5

您需要在伪元素中添加left和bottom属性，以便将它们相对于li进行定位。

这可以帮到你：

ul {
  list-style-type: none;
}

li {
  margin: 3em 0;
  position: relative;
}

li:after {
  content: "";
  border-bottom: 3px solid blue;
  position: absolute;
  width: 30px;
  bottom: -20px;
  left: 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Answer 6

为什么使用li:after作为边框？只需将边框添加到li元素：

li {
    border-bottom: 3px solid blue;
}

您可以在边框之间的空格处使用填充和/或边距。

Answer 7

如果你设置li：after to display：block，你可以改变它的边距，使它与列表项保持一定的距离。

＆＃13;

ul{
  list-style-type: none;
}
li{
  position: relative;
  margin-top:50px;
}
li:after{
  content:"";
  margin-top: 25px;
  border-bottom: 3px solid blue;
  width: 30px;
  display: block;
}

＆＃13;

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

＆＃13;

Answer 8

如果列表项之间需要有限的宽度边框，我建议您使用linear-gradinet()将它们绘制为背景图像。

以下是一个工作示例：

ul {
  list-style-type: none;
}
li {
  padding: 1.5em 0;
}
li:not(:last-child) {
  background: linear-gradient(blue, blue) no-repeat;
  background-position: left bottom;
  background-size: 30px 3px; /* First value represents width
                                while second represents height of border */
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

列表元素之间的伪线？

8 个答案: