如何在图片中心上方画一条竖线？

Question

我希望能够用垂直线连接图像（从中间开始），但不想在第一张图片上方添加线条。

我已经添加了http://jsfiddle.net/cd465nj3/链接。

  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>

- RS17

---

请看 http://jsfiddle.net/cd465nj3/15/，只需要从第一个 li 中删除类。 - manikant gautam

.line {transform: translateX(47px)} li:first-of-type > .line {display: none} - VXp

Answer 1

你只需要将以下代码添加到你的 CSS 中：

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

Example:

/* 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;
}

<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>

- LS_

Answer 2

您可以添加以下样式：

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>

- Mamun

Answer 3

在 .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>

- chintuyadavsara

Answer 4

使用这个CSS。

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

- Dhaval Panchal

Answer 5

你可以使用JavaScript来实现它

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

- Omar