Tôi muốn làm một dòng ở giữa các divs. Trong hình ảnh sau, dòng phải ở giữa các hộp màu đỏ.
Tôi đang cố gắng làm điều đó bằng cách sử dụng chiều cao dòng, nhưng không thể.
Đây là mã:
HTML/CSS:
.wrap { text-align: center; margin: 20px; } .links { padding: 0 10px; border-top: 1px solid #000; height: 1px; line-height: 0.1em; } .dot { width: 20px; height: 20px; background: red; float: left; margin-right: 150px; position: relative; top: -10px; }<div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>
Bản demo: //jsfiddle.net/nkq468xg/ //jsfiddle.net/nkq468xg/
Connexo
51.7K13 Huy hiệu vàng82 Huy hiệu bạc117 Huy hiệu đồng13 gold badges82 silver badges117 bronze badges
Hỏi ngày 19 tháng 11 năm 2016 lúc 19:48Nov 19, 2016 at 19:48
4
Bạn có thể sử dụng Flexbox trên links và đối với dòng bạn có thể sử dụng phần tử giả ____10 trên phần tử bọc.
.wrap { text-align: center; margin: 20px; position: relative; } .links { padding: 0 10px; display: flex; justify-content: space-between; position: relative; } .wrap:before { content: ''; position: absolute; top: 50%; left: 0; border-top: 1px solid black; background: black; width: 100%; transform: translateY(-50%); } .dot { width: 20px; height: 20px; background: red; }<div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>
Đã trả lời ngày 19 tháng 11 năm 2016 lúc 19:55Nov 19, 2016 at 19:55
Nenad Vracarnenad VracarNenad Vracar
Huy hiệu vàng 114K1515 gold badges143 silver badges165 bronze badges
Đây là một trong đó dòng thực sự nằm trên đầu, nhưng nó thêm một yếu tố khác vào HTML:
//jsfiddle.net/nkq468xg/2/
.wrap { text-align: center; margin: 20px; } .links { height: 20px; position: relative; } hr { border: 0; height: 1px; background: black; position: absolute; top: 1px; width: 100%; } .dot { width: 20px; height: 20px; background: red; float: left; margin-right: 150px; }<div class="wrap"> <div class="links"> <hr> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>
Đã trả lời ngày 19 tháng 11 năm 2016 lúc 20:02Nov 19, 2016 at 20:02
Junkfoodjunkiejunkfoodjunkiejunkfoodjunkie
3.1271 Huy hiệu vàng18 Huy hiệu bạc33 Huy hiệu đồng1 gold badge18 silver badges33 bronze badges
6
Bạn có thể sử dụng phần tử giả, như <div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>1
.links { padding: 0 10px; overflow: auto; // Your div will have the height of the overflowing elements } .links::after { content: ''; width: 100%; height: 1px; background: black; display: block; position: relative; top: 10px; }Đã trả lời ngày 19 tháng 11 năm 2016 lúc 20:05Nov 19, 2016 at 20:05
4
Kiểm tra đoạn mã mã của bạn trong câu hỏi của bạn ở đây trên nên nút "Run Code Snippet"), đó có phải là những gì bạn cần không? Đã thêm <div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>2 trong mã của bạn cho <div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>3.
.dot { position: relative; top: -10px; }Fiddle: //jsfiddle.net/nkq468xg/3/
Đã trả lời ngày 19 tháng 11 năm 2016 lúc 20:39Nov 19, 2016 at 20:39
Connexoconnexoconnexo
51.7K13 Huy hiệu vàng82 Huy hiệu bạc117 Huy hiệu đồng13 gold badges82 silver badges117 bronze badges