Question

我想要垂直线（从中间）连接图像，并且我不想在第一张图像上方添加线。

  Image 1
     |
     |
  Image 2
     |
     |
  Image 3

如何修改上面的代码以从中间获取垂直线？任何帮助，将不胜感激！谢谢！

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}

<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>

Answer 1

您只需将其添加到CSS中：

code

示例：

/* center line with image */
ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}
/* Hide first line */
ul li:first-child .line {
  display: none;
}

/* center line with image */
ul {
  display: inline-block;
}
.line {
  display: block;
  margin: 0 auto;
}

/* Hide first line */
ul li:first-child .line {
  display: none;
}
.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}

Answer 2

在.line类中分别创建display:inline-block和margin:0 auto；

ul {
    display: inline-block;
}

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
  border-left: 6px solid green;
  height: 100px;
  display: inline-block;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>
</body>
</html>

Answer 3

您可以添加以下样式：

ul {
  display: inline-block;
}
.line {
  display: block;
  margin: 0 auto;
}

ul li:first-child > span.line { display: none; }

工作代码示例：

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}
ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}

ul li:first-child > span.line { display: none; }

<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>

Answer 4

使用此CSS

ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}

Answer 5

您可以使用javascript

document.querySelectorAll("ul > li")[0].firstChild.classList.remove("line");

如何在图像上方从中心画一条垂直线？

5 个答案: