Адаптивная форма вертикального выравнивания

Question

У меня есть макет формы, подобный тому, что вы видите ниже.Кажется, что я хочу, когда страница в полный размер (на компьютере).Здесь есть кое-что, что я хочу, чтобы расстояние между входами было меньше.

Я также хочу, чтобы все эти входы были вертикальными.На картинке тоже так, но я хочу, чтобы он был выровнен по вертикали, когда он 425px (который является мобильным).Здесь ширина 1148, но не такая, как на первом рисунке.Также ширина ввода слишком велика.Это должно быть меньше, потому что я ожидаю только число в качестве ввода от пользователя

Этот проект был создан с использованием Angular.Ниже мои CSS и HTML.Я взял эту форму в Интернете, которая очень близка к моему подходу, поэтому CSS пришел оттуда.Не обращайте внимания на идентификаторы входов и т. Д.

        * {
      box-sizing: border-box;
    }
    
    form {
      padding: 1em;
      background: #f9f9f9;
      border: 1px solid #c1c1c1;
      margin-top: 2rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      padding: 1em;
    }
    form input {
      margin-bottom: 1rem;
      background: #fff;
      border: 1px solid #9c9c9c;
    }
    form button {
      background: lightgrey;
      padding: 0.7em;
      border: 0;
    }
    form button:hover {
      background: gold;
    }
    
    label {
      text-align: right;
      display: block;
      padding: 0.5em 1.5em 0.5em 0;
    }
    
    input {
      width: 100%;
      padding: 0.7em;
      margin-bottom: 0.5rem;
    }
    input:focus {
      outline: 3px solid gold;
    }
    
    @media (min-width: 200px) {
      form {
        overflow: hidden;
      }
    
      label {
        float: left;
        width: 110px;
      }
    
      input {
        float: left;
        width: calc(100% - 200px);
      }
    
      button {
        float: right;
        width: calc(100% - 200px);
      }
    }

    <form class="form1" (ngSubmit)="onSubmit(f)" style="padding:30px;  ">
                  
           <div class="row" fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="5px" fxLayoutAlign="center center">
                   
           <div class="col">
            <label for="firstName" class="first-name">Number</label>
            <input id="firstName" type="text">
      
            <label for="lastName" class="last-name">Number</label>
            <input id="lastName" type="text">
      
            <label for="job">Number</label>
            <input id="job" type="text">
      
            <label for="age">Number</label>
            <input id="age" type="text">
      
            <label for="email">Number</label>
            <input id="email" type="email">
            <label for="firstName" class="first-name">Number</label>
            <input id="firstName" type="text">
      
            <label for="lastName" class="last-name">Number</label>
            <input id="lastName" type="text">
      
            <label for="job">Number</label>
            <input id="job" type="text">
      
            <label for="age">Number</label>
            <input id="age" type="text">
      
            <label for="email">Number</label>
            <input id="email" type="email">
           </div>
           <div class="col">
            <label for="firstName" class="first-name">Number</label>
            <input id="firstName" type="text">
      
            <label for="lastName" class="last-name">Number</label>
            <input id="lastName" type="text">
      
            <label for="job">Number</label>
            <input id="job" type="text">
      
            <label for="age">Number</label>
            <input id="age" type="text">
      
            <label for="email">Number</label>
            <input id="email" type="email">
    
            <label for="firstName" class="first-name">Number</label>
            <input id="firstName" type="text">
      
            <label for="lastName" class="last-name">Number</label>
            <input id="lastName" type="text">
      
            <label for="job">Number</label>
            <input id="job" type="text">
      
            <label for="age">Number</label>
            <input id="age" type="text">
      
            <label for="email">Number</label>
            <input id="email" type="email">
           </div>
         </div>             
    </form>

Answer 1

Похоже, вы используете Bootstrap:

<form class="form1" (ngSubmit)="onSubmit(f)" style="padding:30px;">                  
    <div class="form-group">
        <label for="firstName">Number</label>
        <input id="firstName" type="text" class="form-control">
    </div>

    <div class="form-group">
        <label for="lastName">Number</label>
        <input id="lastName" type="text" class="form-control">
    </div>

    <!-- and so on -->
</form>

Answer 2

Привет, это происходит потому, что вы используете ширину в процентах, поэтому она рассчитывается в соответствии с разрешением экрана.

Измените ширину ввода в процентах на фиксированную ширину, и вы получите желаемый результат.

@media (min-width: 200px) {
  form {
    overflow: hidden;
  }

  label {
    float: left;
    width: 110px;
  }

  input {
    float: left;
    width: 40px;
  }

  button {
    float: right;
    width: calc(100% - 200px);
  }
}

Попробуйте заменить ширину ввода с calc(100% - 200px) to 40px в вышеупомянутом медиазапросе.