使用CSS的内联表单部件（内联属性）？

Question

我想创建一个简单的表单。最终的设计应该是上面的设计，但是具有响应性的定位。

所以我尝试使用CSS的内联属性：如果我跑，我不会得到任何inlineme部分随时随地

<!--Name...--> 
<div style="display: inline;"> 
<label for="vorname_patient">Vorname: </label> <br> <input type="text" name="vorname_patient" id="vorname_patient" required="" size="20" autofocus=""> <br> 
<label for="nachname_patient">Nachname: </label> <br> <input type="text" name="nachname_patient" id="nachname_patient" required="" size="20"> 
</div> 
<!--Anrede...--> 
<div style="display: inline;"> 
<label for=anrede_patient">Anrede: </label> <br> <input type="text" name="anrede_patient" id="anrede_patient" size="20"> 
</div> 

。

我想这（不带表）：

https://jsfiddle.net/kcd1qr1r/

我干了什么错在这里做什么？谢谢！

Answer 1

行内元素必须在其最近的块父级内流动。所以，因为您将div容器更改为内联，您的标签和输入元素只是在内部流动（最近的块父级）。改为使用inline-block，或者由于该方法可能存在保证金问题，您可能需要尝试使用柔性盒。