Выберите входы и текстовые входы в HTML - Лучший способ сделать равную ширину?

Question

У меня есть такая простая форма (только в иллюстративных целях) ...

<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 индивидуально, или помещая их в таблицы ...

Answer 1

Решение состоит в том, чтобы указать блочную модель для элементов формы, и браузеры, как правило, соглашаются, когда вы используете border-box:

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

---

Есть normalize.css проект, который объединяет такие трюки.

Answer 2

Были такие же проблемы с таблицей и ячейками шириной 100%, с текстовым полем (также с шириной 100%) шире ячейки таблицы.

Это решило мою проблему в css:

table td
{
    padding-right: 8px;
}

Не самое лучшее решение, потому что вы, вероятно, получаете дополнительное пространство справа. Но, по крайней мере, он больше не прячется!

Answer 3

отступ сделает текст ближе к краю поля.

попробуйте установить поле на 0px, и если это кажется правильным, поэкспериментируйте с ним (например, просто установите поле только слева)