相互刷新/对齐标签和输入答案

【问题标题】：flush/align label and input with each other相互刷新/对齐标签和输入
【发布时间】：2016-06-16 17:42:28
【问题描述】：

我有以下代码：

.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>

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

我怎样才能以一种好的、聪明的方式做到这一点？

感谢和欢呼。

【问题讨论】：

标签： html css alignment

【解决方案1】：

这是你在小提琴中的答案 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;}

【讨论】：

这是我搜索的解决方案，谢谢。我编辑了你的小提琴并给标签提供了“margin-bottom：10px”，然后它正是我搜索的对齐方式。干杯。

【解决方案2】：

宽度太小不行，否则可以。

.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>

【讨论】：

您好，感谢您的回答。这里唯一的缺点是，我不想在我的标签上加上刹车字，因为它不在同一行。

【解决方案3】：

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

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

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

【讨论】：