要素間に水平線を追加する

Question

LinkedInのような2つの要素の間に水平線を追加しようとしています： 左側の線で線を取得できません。私は長い間グーグルであり、この特定の事例を見つけることはできません。私はそれがそこにあると確信しているが、私はそれを見つけていない。これは私が得ているどのくらいです：

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

フレックスボックスを使用できるのは本当に簡単です。ここで

p.divider { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
p.divider * { 
 
    flex-shrink: 0 
 
} 
 
p.divider span.divider { 
 
    width: 100%; 
 
    flex-shrink: 1; 
 
    border-bottom: 1px solid black; 
 
    margin: 5px 
 
}

<p class="divider"> 
 
    <span>Part1</span> 
 
    <span class="divider"></span> 
 
    <span>part2</span> 
 
</p>

はロジックです：

span.dividerは、幅の100％を埋めるために設定されているが、これはフレックスボックスのレイアウトであるため、行はできませんオーバーフローする（指定されない限り）。私たちは、要素のどれもが縮小することはできませんレイアウトを伝えるとき：

p.divider * { 
    flex-shrink: 0 
} 

が続いて縮小することができる唯一の要素としてspan.dividerを設定し、それはライン上の他のすべての要素に合わせて縮小されます。

---

フレックスを使用できない場合でも、効果を達成できます。

p.divider { 
 
    background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%); 
 
    overflow: hidden; 
 
} 
 
p.divider > * { 
 
    background: white; 
 
    padding: 0 5px; 
 
} 
 
p.divider > .right { 
 
    float: right; 
 
}

<p class="divider"> 
 
    <span>Hola!!</span> 
 
    <span class="right">Hola2!!</span> 
 
</p>

説明：

あなたが固体に、それは子供たちの設定をカバーし、その後、あなたが希望の色の線形勾配にp.dividerの背景を設定していますコンテンツがあるところに隠す色。 （背景に画像を使用することもできます）

どのような欠点がありますか？あなたがその背後に背景画像を使用している場合、それは悪いなります

フレックスレイアウトとは対照的に：ここで

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>