양식에는 하나의 선택 필드와 두 개의 입력 필드가 있습니다. 이러한 요소는 수직으로 정렬됩니다. 불행히도 이러한 요소의 너비는 동일하지 않습니다.
내 코드는 다음과 같습니다.
<select name="name1" style="width:198px">
<option>value1</option>
<option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">
위의 예를 들어, 선택 요소에 가장 적합한 너비는 198 또는 199 픽셀입니다 (물론 193 픽셀을 시도했지만 차이가 큽니다). 이러한 요소의 너비가 같지 않기 때문에 해상도, 다양한 컴퓨터 및 브라우저에 따라 달라집니다 (때로는 차이가 약 1 또는 2 픽셀이라고 생각합니다). 이러한 요소를 div 또는 테이블 행에 설정하려고 시도했지만 도움이되지 않습니다.
Q : 이러한 요소의 너비를 정확히 동일하게하려면 어떻게해야합니까?
답변
업데이트 된 답변
다음은 input / textarea / select 요소가 사용하는 상자 모델을 변경하여 모두 동일한 방식으로 작동하도록하는 방법입니다. box-sizing
각 브라우저에 대한 접두사로 구현 된 속성 을 사용해야 합니다.
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
이는 앞서 언급 한 2px 차이가 존재하지 않음을 의미합니다.
http://www.jsfiddle.net/gaby/WaxTS/5/의 예
참고 : IE에서는 버전 8 이상에서 작동합니다.
실물
테두리 를 재설정 하면 select
요소는 항상 input
요소 보다 2 픽셀 적습니다 .
답변
위의 Gaby의 대답 (+1)을 시도했지만 부분적으로 문제가 해결되었습니다. 대신 콘텐츠 상자가 테두리 상자로 변경된 다음 CSS를 사용했습니다.
input, select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
답변
이 코드를 CSS에 추가하십시오.
select, input[type="text"]{
width:100%;
box-sizing:border-box;
}
답변
다른 클래스를 만들고 2px 예제로 크기를 늘리십시오.
.enquiry_fld_normal{
width:278px !important;
}
.enquiry_fld_normal_select{
width:280px !important;
}