inline form parts using CSS (inline attribute)?

Question

I want to create a simple form. The final design should be the one above, but with a responsive positioning.

So I tried to use the inline attribute of 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>

If i run that i will not get any inlineme parts anywhere.

i want to get this (without a table):

https://jsfiddle.net/kcd1qr1r/

What did I do wrong here? Thank you!

BCDeWitt · Accepted Answer · 2015-08-21 13:24:39Z

1

Inline elements must flow within their nearest block parent. So, because you changed the div containers to be inline, your label and input elements are just flowing within the body (nearest block parent). Use inline-block instead or, due to possible margin issues with that approach, you may want to try flexboxes.

answered Aug 21, 2015 at 13:24

BCDeWitt

4,8232 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

look001 Over a year ago

very nice! thats what i was searching for

Collectives™ on Stack Overflow

inline form parts using CSS (inline attribute)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related