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

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> 

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

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

谢谢和欢呼。

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

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