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

如果我运行我不会在任何地方得到任何 inlineme 部分。

我想得到这个（没有 table）：

https://jsfiddle.net/kcd1qr1r/

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

Answer 1

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

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

inline form parts using CSS (inline attribute)?

css

forms

inline

input