HTML에서 입력 및 텍스트 입력 선택-동일한 너비를 만드는 가장 좋은 방법은 무엇입니까?

HTML에서 입력 및 텍스트 입력 선택-동일한 너비를 만드는 가장 좋은 방법은 무엇입니까?

---

다음과 같은 간단한 형태가 있습니다 (예시 용) ...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

CSS를 사용한 레이아웃 방법은 다음과 같습니다.

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

내 select요소 (어쨌든 Firefox에서)가 항상 다른 input요소 와 동일한 너비가 아니라는 점을 제외하고는 모두 매우 잘 정렬 됩니다. 일반적으로 몇 픽셀만큼 더 좁습니다.

너비를 픽셀 크기 (예 :)로 변경하려고 시도했지만 200px차이가 없습니다.

이것들을 모두 같은 너비로 만드는 가장 좋은 방법은 무엇입니까? 나는 그것이 설정 나에게 의지하지 않는 희망 select의를 width개별적으로, 또는 테이블에 넣어 ...

---

해결책은 양식 요소에 대한 상자 모델을 지정하는 것이며 테두리 상자를 사용할 때 브라우저가 가장 동의하는 경향이 있습니다.

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

---

There's normalize.css project that aggregates such tricks.

---

padding will make the text be closer to the edge of the box.

try setting the margin to 0px, and if that seems right, play around with it (like just setting margin-left only)

---

Had same problems with 100% width table and cells, with a textbox (also with width at 100%) wider than the table cell.

This solved my problem in the css:

table td
{
    padding-right: 8px;
}

Not the best solution ever, cause you probably get some additional space to the right side. But at least it's not hiding anymore!

참고URL : https://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width