css - 使用 CSS(内联属性)的内联表单部件？

Question

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

于是我尝试使用css的inline属性:

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

如果我运行它，我将不会在任何地方获得任何 inlineme 部件。

我想得到这个(没有表格):

https://jsfiddle.net/kcd1qr1r/

我这里做错了什么？谢谢!

Answer 1

内联元素必须在其最近的父 block 内流动。因此，因为您将 div 容器更改为内联，所以您的标签和输入元素只是在主体(最近的 block 父级)内流动。使用 inline-block 代替，或者由于该方法可能存在边距问题，您可能想尝试 flexboxes。