입력 너비의 비율이 올바르게 작동하지 않습니다.

Question

입력란의 크기가 입력란의 너비의 98 %가되도록하십시오. 너비를 98 %로 설정하면 입력이 화면에서 사라집니다. 입력의 폭을 정의하는 특별한 방법이 있습니까? 여기

내 HTML입니다 :

<div class="large-12 columns centered"> 
    <input class="typeahead" type="text" placeholder="Start typing to search" spellcheck="false" autofocus /> 
</div> 

그리고 여기 내 CSS입니다 :

input { 
    padding: 0.8rem 0.9rem; 
    height: inherit; 
    font-size: 1.25rem; 
    margin: 0 0 .5rem 0; 
    display: block; 
    width: 98%; 
} 

그러나 어떤 이유로,이 결과 :

Answer 1

가에 대한 box-sizing을 제공하십시오 입력의 너비와 높이가 패딩을 고려하도록 입력합니다.

input { 
    padding: 0.8rem 0.9rem; 
    height: inherit; 
    font-size: 1.25rem; 
    margin: 0 0 .5rem 0; 
    display: block; 
    width: 98%; 
    box-sizing:border-box; 
} 

Answer 2

이것은 소자의 폭은 최종 width + padding + border으로 계산되기 때문에,이 box-sizing이라고 일어난다.

다음 CSS를 추가하면 문제를 해결해야합니다

box-sizing: border-box; 

Answer 3

사용 박스 크기가 작동합니다 :

는 는

input { 
    width: percentage you want%; 
    box-sizing: border-box; 
} 

문제를 일으키는 외부 CSS 파일, 그것은 해결되었습니다