方法1：Flexbox

Question

我正在尝试在两个元素之间添加一条水平线，例如LinkedIn：我无法让图像左侧的线条停在左侧计数。我已经谷歌搜索很长一段时间，无法找到这种特殊情况。我确定它在那里，但我还没有找到它。这是我走了多远：

HTML：

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

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/

我还认为这个结构可能是一个选项（div之间的div有边框）：

HTML：

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

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/

但它也不能正常工作。如果有人可以尝试任何一种尝试，那就太棒了。

Answer 1

方法1：Flexbox

＆＃13;

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

＆＃13;

.divider

＆＃13;

由于父级是flexbox，我们可以通过设置flex-grow: 1;告诉.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; }元素填充所有可用空间。

方法2：纯色背景

＆＃13;

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

＆＃13;

.divided

＆＃13;

我们给<span>一个线性渐变作为背景，使显示看起来像你想要的颜色线，然后设置<span>＆＃39; s相同的颜色背景，所以他们覆盖线。

您可以通过几种不同的方式完成相同的操作，例如使用伪元素作为行，然后提供position＆＃39; sa z-index和<dependencies> <dependency> <groupId>com.sikulix</groupId> <artifactId>sikulixapi</artifactId> <version>1.1.0</version> </dependency> </dependencies>。

这种方法的缺点是什么？仅使用背景为纯色。抛出图像，渐变或内容背景所覆盖的任何内容，你最终会得到这样的显示：

Answer 2

这是另一个：

.box { 
  width: 100%;  
  display:-moz-flex;
  display:-webkit-flex;
  display:-ms-flex;
  display:flex;
}

hr {
  /*border: .5px solid #000;*/
  margin-left: 10px;
  margin-right: 10px;
}

.hr-line {
  -moz-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
 }

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

在元素之间添加水平线

2 个答案:

方法1：Flexbox

方法2：纯色背景