2015-01-27 5 views
0

입력 필드가있는 html 양식을 만들고 있습니다. 문자와 숫자를 사용하면 문자 간격이 잘못되었습니다. 문자 간격이 항상 좋은지 어떻게 확인합니까?문자 간격 입력 심지어

좋은 :

Good

나쁜 (자간) : Bad

input{ 
    margin: auto; 
    display: block; 
    background: transparent; 
    height: 76px; 
    border: none; 
    text-align: left; 
    font-family: "Avenir", sans-serif !important; 
    font-weight: 500; 
    font-size: 30px; 
    width: 600px; 
    letter-spacing: 49px; 
    padding-left: 30px; 
} 

<div class="coupon"> 
    <h3 class="widget-title bluetext">Coupon</h3> 
    <div class="couponwrap"> 
    <input type="text" id="ticket-number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="8" minlength="8"> 
    <div class="cursor-hide"></div> 
    </div> 
</div> 

어떻게 다 이걸 고쳐?

+2

고정 폭 글꼴을 사용하거나 8 개의 입력 필드를 작성하십시오. –

+2

'text-align : center'? – Pete

+0

'text-align : center;'는 왼쪽 맞춤보다 낫습니다. – gaynorvader

답변

0

주석에 언급 된대로 Courier와 같은 모노 스페이스 글꼴을 사용해야합니다. Avenir의 문자 (및 기타 공백이 아닌 문자)는 문자 당 고유 한 가로 간격을 갖습니다.

Avenir이 절대적으로 필요한 경우 입력시 자바 스크립트 자동 증가와 함께 여러 입력을 사용할 수 있습니다.