主页 / 问题 / 1062844
Accepted
Андрей Повх
Asked:2020-12-25 07:47:06 +0000 UTC2020-12-25 07:47:06 +0000 UTC

如何制作一条线以使其在点之间延伸？

  • 772

在此处输入图像描述

该网站在 wordpress 上，您需要制作这样一个列表，其中的内容可以有不同的大小。如何制作这样一个 verst 以使线本身在点之间延伸？

html

2 个回答

  1. 保持：

    li {
  list-style: none;
  position: relative;
  padding: 0.5em 1em 0.5em 25px;
}

li:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  display: block;
  background-color: gray;
  left: 5px;
  border-radius: 100px;
  transform: translatey(-50%);
}

li:after {
  content: "";
  position: absolute;
  left:12px;
  bottom:0;
  top:0;
  display:block;
  width:1px;
  background-color: gray;
}

li:first-child:after {top:50%;}

li:last-child:after {bottom:50%;}
    <ul>
  <li>text</li>
  <li>text<br/>text</li>
  <li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
  <li>text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
</ul>

    • 3
  2. Best Answer
    .white_line_top{
  position: absolute;
  top: 0px;
  background-color: #fff;
  width: 5px;
  height: 50%;
}
.white_line_bot{
    position: absolute;
  bottom: 0px;
  background-color: #fff;
  width: 5px;
  height: 50%;
}

    我从评论中接受了建议并封锁了地带。您需要添加 2 个块，一个在顶部上方，一个在底部下方

    • 1

相关问题