Hinzufügen von horizontalen Linien zwischen Elementen

Question

Ich versuche, eine horizontale Linie zwischen zwei Elementen hinzuzufügen, wie LinkedIn: Ich kann nicht die Linie auf der linken Seite des Bildes, um auf der linken Seite zu stoppen. Ich habe lange gegoogelt und kann diesen speziellen Fall nicht finden. Ich bin mir sicher, dass es da draußen ist, aber ich habe es nicht gefunden. Dies ist, wie weit habe ich bekommen:

Die HTML:

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

Und die 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/

Ich dachte auch, dass diese Struktur eine sein könnte Option (div zwischen Elementen mit dem div mit einem Rand):

Die HTML:

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

Und die 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/

Aber es genau funktioniert auch nicht. Wenn jemand einen Versuch aufbessern könnte, wäre es großartig.

Answer 1

Wenn Sie Flex-Box verwenden können, ist es wirklich einfach.

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>

Hier ist die Logik:

span.divider gesetzt ist 100% der Breite zu füllen, sondern weil dies ein Flex-Box-Layout ist, kann die Leitung nicht Überlauf (sofern nicht anders angegeben). Wenn wir das Layout, dass keines der Elemente sagen schrumpfen:

p.divider * { 
    flex-shrink: 0 
} 

gesetzt Dann span.divider als einziges Element, das schrumpfen kann, wird es schrumpft alle anderen Elemente auf der Linie passen.

---

Wenn Sie nicht flex verwenden können, können Sie immer noch den Effekt erzielen.

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>

Erläuterung:

Du p.divider ‚s Hintergrund zu einem linearen Gradienten von der gewünschten Farbe einstellen, dann Einstellungen bedeckenden Kinder auf einen solide sind Farbe, um es dort zu verstecken, wo Inhalt ist. (Sie können auch ein Bild für den Hintergrund verwenden)

Was sind die Nachteile davon? Wenn Sie ein Hintergrundbild hinter sich haben, es sieht schlecht aus:

In Bezug auf die Flex-Layout Gegensatz:

Answer 2

Hier ist ein anderes:

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