Wie Leerzeichen in CSS zu unterstreichen?

Question

Ich mache einen Bericht, der über den Webbrowser druckbar sein soll. Am unteren Rand befindet sich ein Feld, das der Empfänger ausfüllen kann. Ich möchte lieber nicht eine bestimmte Anzahl von Unterstrichen hervorheben, und sie scheinen trotzdem Lücken zu haben.

Was ich für ist ...

Betrag bezahlt: $ _ __ _ __ _ __ _ __ _ __ _ ___

Bis jetzt habe ich dieses CSS geschafft:

<div> 
    <p style="border-bottom: 1px solid black;"> 
     Amount Paid: $ 
    </p> 
</div> 

Das zeichnet eine Linie an den Rand des Elternteils div - was ich will. Allerdings zieht es auch eine Zeile unter "Bezahlter Betrag: $", was ich nicht möchte. Jede Kombination von p s, span s, etc. Ich habe gedacht von ausgefallen:

Wenn ich den Text in einem span setzen, die die Grenze Nukes, spielt es keine Rolle, ich nehme an, da es immer noch Teil der ist p und der Rand wird noch gezeichnet.

Ich kann die Unterstreichung zu einer span nach Text hinzufügen, aber das funktioniert nicht. Es scheint nur, das Leerzeichen zu unterstreichen, wenn der Rahmenstil im Element ist.

Ebenso, wenn ich die p mit einem span ersetzen sie nicht das Memo bekommen, dass sie die Grenze des ganzen Weg erstrecken sollen:

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black;"> </span> 
</p> 

tut nichts. Die Linie wird nie gezeichnet. Wenn ich der zweiten Spanne einen Buchstaben hinzufüge, wird darunter ein Strich gezogen, aber nicht mehr. Und wenn ich die mit etwas anderem wie Divs oder Spannen ersetze, scheint es auch nicht zu funktionieren ...

Irgendwelche Ideen? Danke im Voraus.

Answer 1

Ändern Sie die display (CSS) des zweiten Bereichs zu inline-block und legen Sie width (CSS).

upd:

Oder versuchen Sie so etwas wie:

<p style="width: 200px; display: table;"> 
    <span style="display: table-cell; width: 100px;">Amount Paid: $ </span> 
    <span style="display: table-cell; border-bottom: 1px solid black;"></span> 
</p> 

Answer 2

Wenn Sie nichts dagegen haben, manuell die Breite der Linie angeben, können Sie dies tun:

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span> 

Answer 3

Wenn Sie Wenn Sie sich nicht um die Unterstützung älterer Browser (IE6-Generation) sorgen, wird immer die Eigenschaft min-width verwendet, um eine Standardmenge an Leerraum zu erhalten, die bei Bedarf erweitert wird.

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black; min-width: 100px;"> </span> 
</p> 

Beachten Sie, dass für IE7, dann würden Sie ein overflow: visible zum min-width Elemente hinzufügen müssen, so dass es min-width richtig behandelt, im Gegensatz zu ihm als Breite der Behandlung default (Buggy) Verhalten ist.

Answer 4

Das funktioniert im Jahr 2014.

Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">     </span> 

Answer 5

Eine andere Lösung disply: flex; und flex-grow mit:

.container { 
 
    width: 200px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.underline { 
 
    flex-grow: 1; 
 
    border-bottom: 1px solid black; 
 
    margin-left: 5px; 
 
}

<div class='container'> 
 
    <div class='row'> 
 
     <div class='label'>Count:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
    <div class='row'> 
 
     <div class='label'>Amount Paid:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
</div>