刷新/对齐标签并相互输入

Question

我遵守了代码：

.groups {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  flex-direction: column;
}
  

<div class="groups">
  <div class="group">
    <label>Frist given name
      <input type="text">
    </label>
      
    <label>Surname
      <input type="text">
    </label>
    
    <label>City
      <input type="text">
    </label>
  </div>
  
  <div class="group">
    <label>Text 1
      <input type="text">
    </label>
      
    <label>Bla bla bla
      <input type="text">
    </label>
    
    <label>My dummy-label
      <input type="text">
    </label>
  </div>
  
  <div class="group">
    <label>Hello, I'm a label
      <input type="text">
    </label>
      
    <label>Labelname
      <input type="text">
    </label>
    
    <label>Test-label
      <input type="text">
    </label>
  </div>
</div>

我想将标签和输入相互冲洗（输入左侧的标签有相同的空格），如下图所示：

我怎样才能以一种漂亮，聪明的方式做到这一点？

谢谢＆amp;欢呼声。

Answer 1

如果宽度太小则不起作用，否则会起作用。

.groups {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
}
.group:last-child {
  margin-right: 0
}
.group > label {
  margin-bottom: 10px
}
.group p {
  display: inline-block; 
  width: 110px;
  margin: 0;
} 

<div class="groups">
  <div class="group">
    <label><p>Frist given name</p>
      <input type="text">
    </label>
      
    <label><p>Surname</p>
      <input type="text">
    </label>
    
    <label><p>City</p>
      <input type="text">
    </label>
  </div>
  
  <div class="group">
    <label><p>Text 1</p>
      <input type="text">
    </label>
      
    <label><p>Bla bla bla</p>
      <input type="text">
    </label>
    
    <label><p>My dummy-label</p>
      <input type="text">
    </label>
  </div>
  
  <div class="group">
    <label><p>Hello, I'm a label</p>
      <input type="text">
    </label>
      
    <label><p>Labelname</p>
      <input type="text">
    </label>
    
    <label><p>Test-label</p>
      <input type="text">
    </label>
  </div>
</div>

Answer 2

这是你的答案 https://jsfiddle.net/sesn/bq3gjeug/

CSS：

.groups {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  flex-direction: column;
  margin-right:20px;
}
.group:last-child { margin-right: 0px; }
.group label { display: block; min-width: 100px;  font-size: 12px; margin-bottom: 5px; }
.group input { max-width: 100px; float: right;margin-left: 10px;}

Answer 3

＆＃13;

＆＃13;

.groups {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  flex-direction: column;
}
p{
    float: left;
    margin: 0px 15px;
    width: 118px;
}
label{
    margin-bottom:15px;
}

＆＃13;

<div class="groups">
  <div class="group">
    <label><p>Frist given name</p> 
      <input type="text">
   </label>
      
    <label><p>Surname</p>
      <input type="text">
    </label>
    
    <label><p>City</p>
      <input type="text">
    </label>
  </div>
  
  <div class="group"> 
    <label><p>Text 1</p>
      <input type="text">
   </label>
      
    <label><p>Bla bla bla</p>
      <input type="text">
    </label>
    
    <label><p>My dummy-label</p>
      <input type="text">
    </label>
  </div>
  
  <div class="group">
    <label><p>Hello, I'm a label</p>
      <input type="text">
    </label>
      
    <label><p>Labelname</p>
      <input type="text">
    </label>
    
    <label><p>Test-label</p>
      <input type="text">
    </label>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;