Встроенные поля формы с надписями, расположенными сверху

Я не могу поверить, что мне нужно это спросить, но я нахожусь на своем конце.

Я пытаюсь отобразить 2 поля формы inline, но с меткой для каждого поля в верхней части. В искусстве ascii:

Label 1      Label 2
---------    ---------
|       |    |       |
---------    ---------

Должно быть довольно просто.

<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 />

Это меня доставит:

        ---------           ---------
Label 1 |       |   Label 2 |       |
        ---------           ---------

Чтобы получить метки поверх полей, добавьте 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 />

После того, как я это сделаю, метки будут там, где я хочу их, но поля формы больше не являются строковыми:

Label 1  
---------
|       |
---------

Label 2  
---------
|       |
---------

Мне не удалось найти способ обернуть мой html, чтобы поля отображались inline. Может ли кто-нибудь помочь?

Ответ 1

Я бы поместил каждый вход внутри диапазона с помощью display:inline-block, например:

<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>

Ответ 2

Вы можете вложить свои входы с помощью меток, а затем использовать 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>