Я хотел, чтобы вертикальные линии соединяли изображения (из середины), и я не хочу добавлять строку над первым изображением.
Я добавил свою 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>
Вы можете сделать это, используя JavaScript
document.querySelectorAll("ul > li")[0].firstChild.classList.remove("line");
Вы можете добавить следующий стиль:
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; }
Вам просто нужно добавить это к вашему 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; }
Пример:
/* 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; }
в .line классе делают display:inline-block и margin:0 auto;
.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>
Используйте этот CSS
ul { display: inline-block; } .line { display: block; margin: 0 auto; }