Почему поля ввода шире, чем родительский div? - PullRequest
Новая
       51

Почему поля ввода шире, чем родительский div?

0 голосов
/ 24 января 2019

Почему поле ввода формы шире, чем его родительский div? Ширина применяется к тексту div, но не к div с полем формы в нем. Почему это так?

См. Живой код здесь. 

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}
<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>

1 Ответ

0 голосов
/ 24 января 2019

Убедитесь, что для максимальной ширины поля ввода установлено значение 100%, а для размеров рамки - для рамки, чтобы отступы и границы попадали в эти 100%: 

input {
    max-width: 100%;
    box-sizing: border-box;
}

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}
<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>
...