Öğeleri Arasında Yatay Satır Ekle

Question

İki öğenin arasına yatay çizgi eklemeye çalışıyorum, örneğin LinkedIn: Sol taraftaki sayımda durmak için resmin solundaki çizgiyi alamıyorum. Uzun zamandır Googling yapıyorum ve bu özel durumu bulamıyorum. Eminim orada, ama ben onu bulamadım. Bu benim kazanılmış ettik ne kadar geçerli:

HTML:

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

Ve CSS: Ben de bu yapının bir olabileceğini düşündük

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/

seçeneği (div ile sınır olan öğeler arasında div):

HTML:

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

Ve CSS:

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

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

Ama ya tam olarak çalışmıyor. Herhangi biri denemeyi başardıysa, bu harika olurdu.

Answer 1

Esnek kutu kullanabilirsiniz, gerçekten çok kolay. İşte

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>

mantık:

span.divider genişliğinin% 100 doldurma ayarlıdır ancak bu esnek bir kutu düzeni olduğu için, çizgi olamaz taşma (belirtilmemişse). Biz unsurların hiçbiri küçültmek anlamına düzeni anlatınca:

p.divider * { 
    flex-shrink: 0 
} 

Sonra küçültebiliriz hat üzerindeki diğer tüm öğeleri sığdırmak için küçültmek tek unsur olarak span.divider ayarlayın.

---

Esnek kullanamıyorsanız, yine de etkiyi gerçekleştirebilirsiniz.

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>

Açıklama: sağlam bir karşı çocukları var İstediğiniz renkte bir doğrusal-degrade p.divider 'ın arka planını ayarlarken

ardından kapsayan ayarları İçeriğin bulunduğu yeri gizlemek için renk. (Ayrıca arka plan için bir görüntü de kullanabilirsiniz)

Bunun dezavantajları nelerdir? Bunun arkasında bir arka plan görüntüsü varsa, kötü görünüyor: esnek düzeni tersine

: Burada

Answer 2

başka biri:

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