입력 오버 플로우 컨테이너

컨테이너 내부의 입력에 대해 width: 100% 설정을 컨테이너 용량 이상으로 확장하는 데 문제가 있습니다. 이 예에서입력 오버 플로우 컨테이너

form { 
    max-width: 200px; 
    border: 1px solid #eee; 
} 

.input, button { 
    width: 100%; 
}

버튼이 제대로 컨테이너를 채우고 그러나 입력이 조금 더 연장 :

이

<form>  
    <input type="text" class="input"></input>  
    <button>Button</button> 
</form>

CSS :이 문제는 비록 버튼으로 일어날 것으로 보인다되지 않습니다

enter image description here

어떻게 해결할 수 있습니까? , http://codepen.io/jviotti/pen/qfFmH

출처

2014-02-27 jviotti

당신은이 문제를 해결할 수있는 codepen에 대한

.input, button { 
    width: 100%; 
    box-sizing: border-box; /* add this */ 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
}

출처

2014-02-27 15:56:23

http://codepen.io/Paulie-D/pen/vflcL –

@Paulie_D 들으 추가 :

나는 codepen을 만들었습니다 그리고 벤더 접두사 제안, 나는 내 대답을 업데이 트하지만 오히려'. 입력, 버튼보다는 오히려'*'마녀에 성능 문제가있을 수 있습니다 그것을 설정할 것입니다. –

당신이 언급 한 퍼포먼스 문제는 토론의 주제 였고 중요한 요소가 아니라고 판명되었습니다. –

입력 오버 플로우 컨테이너

답변

관련 문제