Html div中间的水平线

Horizontal line in the middle of divs

提问by sam

I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.

我想在 div 的中间划一条线。在下图中，该线应位于红色框的中间。

I'm trying to do that using the line height, but not able to.

我正在尝试使用行高来做到这一点，但无法做到。

Here's the code:

这是代码：

HTML/CSS:

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>

Demo:https://jsfiddle.net/nkq468xg/

演示：https : //jsfiddle.net/nkq468xg/

回答by Nenad Vracar

You can use Flexboxon linksand for line you can use :beforepseudo-element on wrap element.

您可以使用Flexboxonlinks和 for line 您可以:before在 wrap 元素上使用伪元素。

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

回答by junkfoodjunkie

Here's one where the line is actually on top, but it does add another element to the HTML:

这是该行实际上位于顶部的一个，但它确实向 HTML 添加了另一个元素：

https://jsfiddle.net/nkq468xg/2/

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>  

回答by Amaury Hanser

You can use pseudo element, like :after

您可以使用伪元素，例如 :after

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

回答by connexo

Check your code snippet in your question here on SO ("Run code snippet" blue button), is that what you need? Added position: relative; top: -10px;in your code for .dot.

在 SO 上的问题中检查您的代码片段（“运行代码片段”蓝色按钮），这是您需要的吗？position: relative; top: -10px;在您的代码中添加了.dot.

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

Fiddle: https://jsfiddle.net/nkq468xg/3/

小提琴：https: //jsfiddle.net/nkq468xg/3/