동일한 너비의 입력을 얻고 필드를 선택하는 방법
양식에는 하나의 선택 필드와 두 개의 입력 필드가 있습니다. 이러한 요소는 수직으로 정렬됩니다. 불행히도 이러한 요소의 너비는 동일하지 않습니다.
내 코드는 다음과 같습니다.
<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 : 이러한 요소의 너비를 정확히 동일하게하려면 어떻게해야합니까?
업데이트 된 답변
다음은 입력 / 텍스트 영역 / 선택 요소에서 사용하는 상자 모델을 변경하여 모두 동일한 방식으로 작동하도록하는 방법입니다. 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 픽셀 적습니다 ..
예 : http://www.jsfiddle.net/gaby/WaxTS/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;
}
참고 URL : https://stackoverflow.com/questions/4073768/how-to-get-equal-width-of-input-and-select-fields
'IT story' 카테고리의 다른 글
Chrome에서 스크롤 막대가 페이지 너비에 추가되는 것을 방지 (0) | 2020.08.07 |
---|---|
adb가 비 시장 APK를 업데이트합니까? (0) | 2020.08.07 |
log4net과 ELMAH의 차이점은 무엇입니까? (0) | 2020.08.07 |
SQL 하나의 명령에서 int 열에 대해 하나를 늘리거나 줄이는 방법 (0) | 2020.08.07 |
netcat으로 UDP 패킷을 하나만 보내는 방법은 무엇입니까? (0) | 2020.08.07 |