Inline form fields with labels placed on top
I can't believe I'm having to ask this, but I'm at my wit's end.
I'm trying to display 2 form fields inline, but with the label for each field on the top. In ascii art:
Label 1 Label 2
--------- ---------
| | | |
--------- ---------
Should be pretty simple.
<label for=foo>Label 1</label>
<input type=text name=foo id=foo />
<label for=bar>Label 2</label>
<input type=text name=bar id=bar />
This will get me:
--------- ---------
Label 1 | | Label 2 | |
--------- ---------
To get the labels on top of the boxes, I add display=block:
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
After I do this, the labels are where I want them, but the form fields are no longer inline:
Label 1
---------
| |
------开发者_运维知识库---
Label 2
---------
| |
---------
I've been unable to find a way to wrap my html so the fields display inline. Can anyone help?
I would put each input inside an span with display:inline-block
, like this:
<span style="display:inline-block">
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
</span>
<span style="display:inline-block">
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
</span>
You could enclose your inputs in with the labels and then use CSS:
label{display:inline-block;}
input{display:block;}
<label>Label 1<input type=text name=foo id=foo /></label>
<label>Label 2<input type=text name=bar id=bar /></label>
精彩评论