Come sottolineare lo spazio vuoto nei CSS?

Sto facendo un rapporto che dovrebbe essere stampabile dal browser web. In fondo c’è un campo che il destinatario deve compilare, quindi è sottolineato. Preferirei non dover eyeball un certo numero di underscore, e sembrano avere lacune in loro comunque.

Quello che sto cercando è …

Importo pagato: $ _ __ _ __ _ __ _ __ _ __ _ ___

Finora, ho gestito questo CSS:

Amount Paid: $

Ciò disegna una linea fino al bordo del div genitore – che voglio. Tuttavia, disegna anche una riga sotto “Importo pagato: $”, che non desidero. Ogni combinazione di p s, span s, ecc. Ho pensato di aver fallito:

Se metto il testo in uno span che nuoce il bordo, non importa, suppongo poiché è ancora parte del p e il bordo è ancora disegnato.

Posso aggiungere la sottolineatura a uno span dopo il testo, ma questo non funziona. Sembra solo voler sottolineare lo spazio vuoto quando lo stile del bordo è nell’elemento p .

Allo stesso modo, se sostituisco il p con uno span non ottiene il memo che dovrebbe estendere il bordo fino in fondo:

 

Amount Paid: $

Non fa nulla. La linea non viene mai disegnata. Se aggiungo una lettera alla seconda estensione, viene disegnata sotto quella, ma non di più. E se sostituisco il p con qualcos’altro come div o span, non sembra funzionare neanche …

Qualche idea? Grazie in anticipo.

Cambia il display (CSS) della seconda span in inline-block e imposta la sua width (CSS).

upd:

Oppure prova qualcosa come:

 

Amount Paid: $

Questo funziona nell’anno 2014.

 Amount Paid: $   

Se non sei preoccupato del supporto per i browser più vecchi (generazione IE6), viene sempre utilizzata la proprietà min-width per ottenere una quantità predefinita di spazio vuoto che si espande se necessario.

 

Amount Paid: $

Si noti che per IE7, si dovrebbe aggiungere un overflow: visible all’elemento min-width in modo che tratti correttamente la larghezza minima, a differenza del comportamento predefinito (buggy) di trattarlo come larghezza.

Se non ti dispiace specificare manualmente la larghezza della linea, puoi farlo:

   

Un’altra soluzione usando disply: flex; e flex-grow :

 .container { width: 200px; } .row { display: flex; } .underline { flex-grow: 1; border-bottom: 1px solid black; margin-left: 5px; } 
 
Count:
Amount Paid: