如何使用上面的图片和文字创建一条垂直线，通过多个<li>

Question

我在尝试通过多个<li>创建垂直线时遇到一些麻烦，同时在其上方放置了一些文字和图片。我想要实现的是如下图所示。

我已经找到了如何创建垂直线。我发现这可以通过使用上面:after上的css中的<ul>标记来实现。例如：

＆＃13;

＆＃13;

ul:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 60px;
}

＆＃13;

<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

现在我还想在此行上方添加一些文本和图像，就像在示例图像中一样。有谁知道如何最好地实现这一目标？或另一种解决方案提前谢谢。

Answer 1

您可以先将li用于图片和文字，然后将其与position: absolute对齐，以使其与该行对齐。您还需要在padding-top上添加ul，并从红线的高度减去相同的金额。

ul {
  position: relative;
  list-style: none;
  padding-top: 80px;
}
li:first-child {
  position: absolute;
  left: 150px;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}
li:not(:first-child) {
  border: 1px solid black;
  margin: 10px;
}
ul:after {
  content: '';
  position: absolute;
  left: 150px;
  top: 80px;
  background: red;
  height: calc(100% - 80px);
  width: 2px;
}

<ul>
  <li>
    <img src="http://placehold.it/50x50">
    <div>Lorem ipsum dolor.</div>
  </li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>

Answer 2

如果您对该行的每个::before使用::after（或<li>）伪元素会更好，这样您就可以保存<ul>伪元素文字和图片，如下：

ul {
  list-style: none;
  padding: 0;
  padding-top: 40px;
  position: relative;
}
ul::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
}
ul::after {
  content: "Here's some text";
  position: absolute;
  top: 20px;
}

li {
  position: relative;
  padding: 0;
  padding-left: 15px;
}

li::before {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  left: 5px;
  background: red;
  position: absolute;
}

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

然后使用图片替换background中的ul::before ...如果不使用额外的标记或javascript，我无法想到另一种解决方法

Answer 3

.wrap {
  position: relative;
  width: 30%;
  background: lightgreen;
  z-index: 1;
}
.header {
  width: 100%;
}
.header img {
  width: 100%;
  margin: 0;
  float: left;
}
.header p {
  background: tomato;
  text-align: center;
}
.header p:after {
  content: ' ';
  width: 4px;
  height: 100%;
  position: absolute;
  background: tomato;
  top: 0;
  left: 60px;
  z-index: -1;
}

<div class="wrap">
<div class="header">
  <img src="http://lorempixel.com/output/sports-q-c-150-80-3.jpg"><p>some text</p>
</div>
<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>
</div>