Sottolineato accanto al testo tenerli separati

Question

Sto cercando di implementare la seguente:

vedrete che c'è un'immagine e poi una linea al suo fianco. Sto cercando di fare in modo che la linea rimanga alla stessa distanza dal testo man mano che lo schermo diminuisce di dimensioni. Funziona OK, ma quando lo schermo diventa più piccolo la linea va nella parte 'Test Border'.

Vedere il codice di seguito su come ho implementato questo. Forse dovrei adottare un approccio diverso.

Also, a jsfiddle here for your convenience.

h3 { 
 
    font-size: 26px; 
 
    color: #000 !important; 
 
    max-width: 90px; 
 
    display: inline-block; 
 
    padding-bottom: 15px; 
 
    width: 8%; 
 
} 
 

 
.underline { 
 
    display: inline-block; 
 
    border-bottom: 1px solid #c6bcb6; 
 
    width: 90%; 
 
}

<h3>Test Border</h3> 
 
<div class="underline"></div>

Answer 1

È possibile visualizzare entrambi i blocchi come tabella e specificare primo blocco larghezza fissa (come è solo il testo che fa non cambiare).

.wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    vertical-align: bottom; 
 
    padding-bottom: 15px; 
 
    table-layout: fixed; 
 
} 
 

 
h3 { 
 
    font-size: 26px; 
 
    color: #000 !important; 
 
    max-width: 90px; 
 
    display: table-cell; 
 
    width: 85px; 
 
} 
 

 
.underline { 
 
    display: table-cell; 
 
    border-bottom: 1px solid #c6bcb6; 
 
    width: 100%; 
 
    position: relative; 
 
    top: -12px; 
 
}

<div class="wrapper"> 
 
    <h3>Test Border</h3> 
 
    <div class="underline"></div> 
 
</div>

Answer 2

Prova il seguito CSS:

h3 { 
    font-size: 26px; 
    color: #000 !important; 
    display: inline-block; 
    padding-bottom: 15px; 
} 

.underline { 
    border-bottom: 1px solid #C6BCB6; 
    width: 90%; 
} 

Answer 3

Si potrebbe provare a utilizzare un display da tavolo, con il testo e la linea di ciascuno con il proprio cellulare:

<div class="div-row"> 
    <div class="div-cell"><h3>Test Border</h3></div> 
    <div class="div-cell underline"></div> 
<div> 

CSS:

.div-row { 
    display: table-row; 
    width: 100%; 
} 

.div-cell { 
    display: table-cell; 
} 

Non ho tes questo, ma il div che contiene la linea dovrebbe ridursi automaticamente alla larghezza disponibile come ridimensiona la finestra del browser (o mentre vai da desktop a mobile).

Se lo si desidera, è anche possibile impostare una larghezza fissa sul div contenente il testo.

Answer 4

Penso che la soluzione migliore sia cambiare il markup, perché con il tuo codice il testo nel tag h3 potrebbe essere più grande della larghezza massima (infatti, lo è). Qualcosa di simile a questo:

.textline { 
 
    display: table; 
 
} 
 

 
h3 { 
 
    font-size: 26px; 
 
    color: #000 !important; 
 
    display: table-cell; 
 
    width: 9%; 
 
    margin-right: 1%; 
 
    vertical-align: bottom; 
 
} 
 

 
.underline { 
 
    display: table-cell; 
 
    border-bottom: 1px solid #c6bcb6; 
 
    width: 90%; 
 
    position: relative; 
 
    top: -7px; 
 
}

<div class="textline"> 
 
    <h3>Test border</h3> 
 
    <div class="underline"></div> 
 
</div>

Answer 5

Si può provare calc() proprietà e funzionerà ...

Check this fiddle here

Quello che devi fare,

h3 { 
    font-size: 26px; 
    display: inline-block; 
    max-width:90px; 
    margin-right:10px; 
} 

.underline { 
    display: inline-block; 
    border-bottom: 1px solid #c6bcb6; 
    width: calc(100% - 104px); 
} 

Answer 6

Quando si utilizzano le percentuali, è necessario prendere in considerazione le misure fisse degli altri elementi, larghezza, margini, bordi ... Non lo stesso 90% di uno schermo 1000 px che uno di 500 px, lo spazio rimanente è inferiore. È possibile utilizzare Calc per risolvere questi problemi:

h3 { 
 
    font-size: 26px; 
 
    color: #000 !important; 
 
    width: 95px; 
 
    display: inline-block; 
 
    padding-bottom: 15px; 
 
} 
 

 
.underline { 
 
    display: inline-block; 
 
    border-bottom: 1px solid #c6bcb6; 
 
    width: calc(100% - 100px); 
 
}

<h3>Test Border</h3> 
 
<div class="underline"></div>

Answer 7

probabilmente sarei utilizzare la casella di flex come questo.

.border { 
 
    display: flex; 
 
} 
 
.border .string { 
 
    font-weight: bold; 
 
    font-size: 26px; 
 
    flex: 0 1; 
 
} 
 
.border .line { 
 
    border-bottom: 1px solid #c6bcb6; 
 
    flex: 1; 
 
    margin: 0 5px 0 10px; 
 
    transform: translate(0, -6px); 
 
}

<div class="border"> 
 
    <span class="string">Test String</span> 
 
    <div class="line"></div> 
 
</div>

Questo renderà il titolo largo come il lavoro più lunga ininterrotta, e il confine sarà riempire il resto dello spazio.

Ecco come si presenta ai paragrafi tra ogni intestazione (quasi esempio reale mondo)

.border { 
 
    display: flex; 
 
} 
 
.border .string { 
 
    font-weight: bold; 
 
    font-size: 26px; 
 
    flex: 0 1; 
 
} 
 
.border .line { 
 
    border-bottom: 1px solid #c6bcb6; 
 
    flex: 1; 
 
    margin: 0 5px 0 5px; 
 
    transform: translate(0, -6px); 
 
}

<div class="border"> 
 
    <span class="string">Lorem ipsum dolor</span> 
 
    <div class="line"></div> 
 
</div> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus 
 
    sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit 
 
    sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis 
 
    magna dolor, vitae facilisis nibh euismod et. 
 
</p> 
 
<div class="border"> 
 
    <span class="string">Etiam quis molestie</span> 
 
    <div class="line"></div> 
 
</div> 
 
<p> 
 
    Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum 
 
    dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus 
 
    tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at. 
 
</p> 
 
<div class="border"> 
 
    <span class="string">Phasellus sed orci</span> 
 
    <div class="line"></div> 
 
</div> 
 
<p> 
 
    Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique 
 
    lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum, 
 
    ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia 
 
    commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula. 
 
</p> 
 
<div class="border"> 
 
    <span class="string">Fusce ultricies ante</span> 
 
    <div class="line"></div> 
 
</div> 
 
<p> 
 
    Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum, 
 
    tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl 
 
    viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac 
 
    nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus. 
 
</p>