CSS'de boş alan nasıl vurgulanır?

Question

Web tarayıcısından yazdırılabilen bir rapor hazırlıyorum. Altta, alıcının doldurması gereken bir alan vardır, bu nedenle altı çizilir. Belli bir sayı altçizgiyi gözetlemek zorunda kalmamayı tercih ediyorum ve yine de bunların içinde boşluklar var gibi görünüyor.

Ne ...

Tutar Ödenmelidir için gidiyorum: $ _ __ _ __ _ __ _ __ _ __ _ ___

Şimdiye kadar, bu CSS'yi yönetdim:

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

Bu, üstteki div kenarına bir çizgi çizer - ki bu da benim istediğim. Bununla birlikte, istemediğim "Ödenen Miktar: $" nin altında bir çizgi çiziyor. Ben başarısız oldu düşündüm vb p s, span s, her kombinasyonu: Sınırı nükleer silahları bir span metin koyarsanız

, hala bir parçası olduğundan herhalde fark etmez p ve sınır hala çizilmiş.

Alt çizgiyi metinden sonra bir açıklığa ekleyebilirim, ancak bu çalışmaz. Kenarlık stili p öğesinde olduğunda, yalnızca boş alanı vurgulamak istiyor gibi görünüyor.

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

şey yapmaz: Bir span ile p değiştirirseniz

Aynı şekilde, Sınırın uzanmasına gerektiğini not almaz. Çizgi asla çizilmez. İkinci yayına bir harf eklerseniz, bunun altında çizilir, ancak artık olmaz. Ve eğer p yerine div veya yaygı gibi bir şey koyarsam, bu işe yaramıyor ...

Herhangi bir fikrin var mı? Şimdiden teşekkürler.

Answer 1

İkinci yayının display (CSS) değerini inline-block olarak değiştirin ve width (CSS) değerini ayarlayın.

gnc:

Ya denemek gibi bir şey:

<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

el hattının genişliğini belirten sakıncası yoksa, bunu yapabilirsiniz:

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

Answer 3

Eğer Eski tarayıcılar (IE6 üretimi) için destek konusunda endişelenmiyorsanız, gerektiğinde genişleyen varsayılan bir boş alan elde etmek için her zaman min genişlik özelliğini kullanmaktadır. Düzgün min-genişliğini davranır böylece karşıt olarak varsayılan genişliği olarak tedavi (buggy) davranıştır için IE7 için, sen min-width öğeye bir overflow: visible eklemek zorunda olduklarını

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

Not.

Answer 4

Bu Başka Bir çözüm disply: flex; ve flex-grow kullanılarak 2014.

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

Answer 5

yılda çalışır:

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

o anlam Nerede olduğunu durumlardan birinde sendeledi olabilir