html - Inline form fields with labels placed on top -
I do not believe that I have to ask this, but I am at the end of my intelligence
I'm trying to display 2 form fields inline, but with the label of each field at the top. In ASCII art:
label 1 label 2 --------- --------- | | | | --------- ---------
should be very simple.
& lt; Label for = foo & gt; Label 1 & lt; / Label & gt; & Lt; Input type = text name = foo id = foo / & gt; For labels & lt; Label = bar & gt; Label 2 & lt; / Label & gt; & Lt; Input type = text name = bar id = bar / & gt;
I'll find this:
--------- --------- label 1 | | Label 2 | --------- ---------
To get a label at the top of the box, I add display = block:
& lt; Label = foo style = "display: block" & gt; Label 1 & lt; / Label & gt; & Lt; Input type = text name = foo id = foo / & gt; & Lt; Label = = "display: block" for style = & gt; Label 2 & lt; / Label & gt; & Lt; Input type = text name = bar id = bar / & gt;
After doing this, the labels are those where I want them, but the form fields are no longer inline:
label 1---- ------ | | --------- label 2 --------- | | ---------
I can not find a way to wrap my HTML so that the field inline can be displayed. Can anyone help?
I assign each input to display: inline-block
, like this:
& span style = "display: inline-block" & gt; & Lt; Label = foo style = "display: block" & gt; Label 1 & lt; / Label & gt; & Lt; Input type = text name = foo id = foo / & gt; & Lt; / Span & gt; & Lt; Span style = "display: inline-block" & gt; & Lt; Label = = "display: block" for style = & gt; Label 2 & lt; / Label & gt; & Lt; Input type = text name = bar id = bar / & gt; & Lt; / Span & gt;
Comments
Post a Comment