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

Question

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

所以我尝试使用css的内联属性：

<!--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，或者由于此方法可能出现保证金问题，您可能需要尝试使用flexbox。