开发者

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>

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜