동일한 너비의 입력을 얻고 필드를 선택하는 방법

동일한 너비의 입력을 얻고 필드를 선택하는 방법

---

양식에는 하나의 선택 필드와 두 개의 입력 필드가 있습니다. 이러한 요소는 수직으로 정렬됩니다. 불행히도 이러한 요소의 너비는 동일하지 않습니다.

내 코드는 다음과 같습니다.

<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