Блог

Я хотел бы создать форму с адресом и полем apt #, и чтобы поле apt # имело максимальную длину 8, а другое поле занимало всю ширину, оставшуюся для этой строки. Мне было интересно, как я могу это сделать, не устанавливая ширину вручную.

У меня есть что-то вроде этого:

 <style>
.container {
  display: flex;
}
</style>

<div class="container">
  <input placeholder="Address"/>
  <input name="apt" placeholder="Apt #" maxlength=8 />
</div>  

Спасибо!

Используйте flex-grow :

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

На самом деле вы не можете заставить квартиру вводить его maxlength , поскольку это относится к максимальной длине символов, которые могут содержать входные данные, а не к длине самого элемента. Но я оценил количество символов / 2 в rems как хорошую ширину для элемента.

 <style>
.container {
  display: flex;
}

.address{
  flex-grow: 1;
}

.apt{
  width: 4rem;
}
</style>

<div class="container">
  <input class="address" placeholder="Address"/>
  <input class="apt" name="apt" placeholder="Apt #" maxlength=8 />
</div>