div中间的水平线

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

我想，使用线高度，但没能做到。

下面的代码：

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>

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

来源

2016-11-19 sam

你为什么不能只是使用上的链接，而不是行高边境顶 – Geeky

检查你的代码片段在你的问题在这里SO（“运行的代码段”蓝色按钮），是你需要什么？增加了'position：relative; top：-10px;'在'.dot'的代码中。 https://jsfiddle.net/nkq468xg/3/ – connexo

您可以使用1像素背景图像绘制线条，并最终使用内嵌块代替浮动：https://jsfiddle.net/nkq468xg/4/ –

您可以使用Flexbox在links和行可以使用:before包装元素上的伪元素。

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

来源

2016-11-19 19:55:11

这里有一个当行实际上是在上面，但它的另一个元素添加到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>

来源

2016-11-19 20:02:46 junkfoodjunkie

添加HTML元素应该总是***是最后的手段。在这里，这是绝对没有必要的。 – connexo

取决于您是否需要上方或下方的线。 – junkfoodjunkie

不，在这种情况下，不需要额外的标记。 – connexo

你可以因此使用伪元素，像: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; 
}

来源

2016-11-19 20:05:41 Kangouroops

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

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

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

来源

2016-11-19 20:39:33 connexo

div中间的水平线

回答

相关问题