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

Popular posts from this blog

windows - Heroku throws SQLITE3 Read only exception -

lex - Building a lexical Analyzer in Java -

python - rename keys in a dictionary -