У меня проблема, когда установка width: 100% на входы внутри контейнера превышает емкость контейнера. Однако с кнопками такой проблемы не возникает:

<form>    
  <input type="text" class="input"></input>    
  <button>Button</button>
</form>

CSS:

form {
  max-width: 200px;  
  border: 1px solid #eee;   
}

.input, button {
  width: 100%;
}

В этом примере кнопка правильно заполняет контейнер, однако ввод расширяется немного дальше:

enter image description here

Как я могу это исправить?

Я создал код: http://codepen.io/jviotti/pen/qfFmH

6
jviotti 27 Фев 2014 в 19:53

1 ответ

Лучший ответ

Вы можете исправить это добавив

.input, button {
  width: 100%;
  box-sizing: border-box; /* add this */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
}

Размер коробки - https://developer.mozilla.org/ en-US / docs / Web / CSS / box-sizing

7
Anjanavr 24 Окт 2019 в 15:15
Спасибо за код и предложение префикса поставщика, я обновил свой ответ, но я бы предпочел установить его на .input,button, а не на *, поскольку могут возникнуть некоторые проблемы с производительностью.
 – 
web-tiki
27 Фев 2014 в 20:02
Упомянутая вами проблема производительности была предметом некоторых дискуссий и не была сочтена существенным фактором.
 – 
Paulie_D
27 Фев 2014 в 20:03