响应形式垂直对齐

Question

我的表单布局类似于您在下面的图片中看到的那样。当页面全尺寸（在计算机上）时，这似乎是我希望的。在这里，我希望输入之间的距离更短。

我也希望所有这些输入都是垂直的。在图片中也是如此，但是我希望它在425像素（可移动）时垂直对齐。这是1148的宽度，但与第一张图片不同。输入宽度也太大。它应该较小，因为我希望仅数字作为用户输入]

此项目是使用Angular完成的。以下是我的CSS和HTML。我在与我的方法非常接近的互联网上采用了这种形式，因此CSS就是从那里来的。不要介意输入的ID等。

        * {
      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

您好，这是因为您使用的是百分比宽度，所以它根据屏幕分辨率进行计算。

将输入的宽度从百分比更改为固定宽度，您将获得所需的输出。

@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的输入宽度。

Answer 2

似乎您正在使用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>