在元素之间添加水平线 [英] Add Horizontal Lines Between Elements

问题描述

我正在尝试在两个元素之间添加一条水平线，例如LinkedIn：

我无法在图像停止在左侧计数。我已经使用谷歌搜索系统很长时间了，但是找不到这种特殊情况。我确定它在那里，但是我还没有找到它。这是我所走的距离：

HTML：

 < label> count< / label> 
< div class = img> 
< img src = http://i.stack.imgur.com/qh235.png /> 
< / div> 
  

和CSS：

  div.img {
职位：相对； 
 font-size：30px; 
 z-index：1； 
溢出：隐藏； 
 text-align：right; 
} 
 div.img：之前{
位置：绝对； 
最高：51％； 
溢出：隐藏； 
宽度：100％； 
余量：-100％； 
 text-align：right; 
高度：1像素； 
内容： \a0; 
 background-color：蓝色； 
} 
  

我也认为这种结构可能是一个选择（div在带有边框的div之间）：

HTML：

 < label> count< / label> 
< div class = hr-line>< / div> 
< img src = http://i.stack.imgur.com/qh235.png /> 
  

和CSS：

  div.hr-line {
职位：相对； 
显示：inline-block; 
 margin-left：5px; 
 margin-right：5px; 
宽度：100％； 
 border-bottom：1px solid＃7A7A7A; 
} 
  

由于父级是flexbox，我们只能告诉 .divider 元素通过设置 flex-grow：1; 来填充所有可用空间。

---

方法2：纯底色

 。划分{背景：线性渐变（透明45％，黑色45％，黑色55％，透明55％）；}。划分范围{背景：白色； padding：0 5px;}。divided span：last-of-type {float：right;}  

 < p class = divided> < span>内容1< / span> < span>内容2< / span>< / p>  

我们为 .divided 提供了一个线性-渐变作为背景，以使显示看起来像您想要的颜色，然后将< span> 设置为具有相同的颜色背景，因此他们覆盖线。

您可以通过几种不同的方式来完成同一件事，例如使用伪元素作为行，然后给< span> 是位置和 z-index 。

此方法的缺点是什么？ 仅只能在纯色背景下使用。抛出图像，渐变或内容背景会覆盖的任何内容，您将最终得到如下显示：

I'm trying to add a horizontal line between two elements, like LinkedIn: I can't get the line on the left of the image to stop at the left side count. I've been Googling for a long time and can't find this particular case. I'm sure it's out there, but I haven't found it. This is how far I've gotten:

The HTML:

<label>count</label>
<div class="img">
<img src="http://i.stack.imgur.com/qh235.png" />
</div>

And the CSS:

div.img {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: right;
}
div.img:before {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 100%;
    margin-left: -100%;
    text-align: right;
    height: 1px;
    content: '\a0';
    background-color: blue;
}

http://jsfiddle.net/XWVxk/1465/

I also thought that this structure might be an option (div in between elements with the div having a border):

The HTML:

<label>count</label>
<div class="hr-line"></div>
<img src="http://i.stack.imgur.com/qh235.png" />

And the CSS:

div.hr-line {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    border-bottom: 1px solid #7A7A7A;
}

http://jsfiddle.net/XWVxk/1464/

But it doesn't work exactly either. If anyone could touch up either attempt, it would be great.

解决方案

Method 1: Flexbox

.divided {
  display: flex;
  align-items: center;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

<p class="divided">
  <span>Content 1</span>
  <span class="divider"></span>
  <span>Content 2</span>
</p>

Because the parent is flexbox, we can just tell the .divider element to fill all available space, by setting flex-grow: 1;.

---

Method 2: Solid background color

.divided {
  background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%);
}

.divided span {
  background: white;
  padding: 0 5px;
}

.divided span:last-of-type {
  float: right;
}

<p class="divided">
  <span>Content 1</span>
  <span>Content 2</span>
</p>

We are giving .divided a linear-gradient as a background, to make a display that looks like a line of the color you want, then settings the <span>'s to have the same color background, so they cover the line.

You can accomplish the same thing quite a few different ways, such as using a pseudo element as the line, then giving the <span>'s a position and z-index.

What are the drawbacks of this method? It only works with a background that's a solid color. Throw an image, gradient, or anything that the content's background is gonna cover, and you'll end up with a display like so:

这篇关于在元素之间添加水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！