Hướng dẫn css draw horizontal line in middle of div - css vẽ đường ngang ở giữa div

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: https://jsfiddle.net/nkq468xg/ https://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:

https://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>

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

<div class="wrap">
  <div class="links">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.dot {
    position: relative;
    top: -10px;
}

Fiddle: https://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

Làm cách nào để thêm một đường ngang vào một div?

Làm thế nào để tôi tập trung một dòng trong một div?

Làm cách nào để thay đổi vị trí của một đường ngang trong CSS?

Làm thế nào để tôi tập trung một đường ngang trong HTML?