CSS에서 빈칸에 밑줄을 긋는 방법?

Question

웹 브라우저에서 인쇄 할 수있는 보고서를 작성 중입니다. 하단에는 수신자가 입력 할 입력란이 있으므로 밑줄이 그어져 있습니다. 차라리 특정 수의 밑줄을 볼 필요가 없으며 어쨌든 그들 사이에 간격이있는 것 같습니다.

내가 ...

금액이 지불되어가는 오전 : $ _ __ _ __ _ __ _ __ _ __ _ ___

지금까지이 CSS를 관리했습니다 :

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

그 부모의 가장자리에 선을 그립니다 div - 내가 원하는. 그러나, "Amount Paid : $"아래에 선을 그으므로 원하지 않습니다. 나는 실패를 생각했습니다 등 p의, span의의 모든 조합 : 나는 국경을 핵 span에 텍스트를 넣을 경우

, 아직도의 일부이기 때문에 내 생각, 중요하지 않습니다 p이고 테두리는 여전히 그려져 있습니다.

텍스트 뒤에 스팬에 밑줄을 추가 할 수는 있지만 작동하지 않습니다. 테두리 스타일이 p 요소에있을 때만 공백에 밑줄을 긋기를 원합니다.

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

는 아무것도 실행하지 않습니다 : 나는 span와 p를 교체 할 경우

마찬가지로, 그것은 국경 모든 방법을 확장해야한다는 메모를하지 않습니다. 선은 그려지지 않습니다. 두 번째 범위에 문자를 추가하면 해당 문자가 그 아래에 그려지지만 그 이상은 표시되지 않습니다. 그리고 p을 div 또는 span과 같은 다른 것으로 바꾸면 다음 중 하나라도 작동하지 않는 것 같습니다.

아이디어가 있으십니까? 미리 감사드립니다.

Answer 1

두 번째 범위의 display (CSS)을 inline-block으로 변경하고 width (CSS)으로 설정합니다.

UPD :

또는 시도 무언가 같이 :

<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

수동 라인의 폭을 지정 괜찮다면, 당신은이 작업을 수행 할 수 있습니다

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

Answer 3

당신이 만약 구형 브라우저 (IE6 세대)에 대한 지원은 걱정하지 않으므로, min-width 속성을 사용하여 필요한만큼 확장되는 빈 공간을 기본 크기로 가져옵니다. 제대로 분 너비를 처리하도록 반대가 기본 폭으로 치료 (버그) 행동의에 IE7을 위해, 당신은 최소 너비 요소에 overflow: visible을 추가해야 할 거라고

는

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

참고.

Answer 4

이 또 다른 하나 개의 솔루션이 disply: flex; 및 flex-grow를 사용하여 2014 년

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

Answer 5

년에 작동합니다

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

는 의미 어디 당신은 상황 중 하나가 우연히 수도