Вопросы Теги

Встроенные поля формы с маркировками, помещенными в вершину

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

Я пытаюсь отобразить 2 встроенные поля формы, но с маркировкой для каждого поля на вершине. В искусстве 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 так полевой встроенный дисплей. Кто-либо может помочь?

10
задан rcourtna 14 June 2010 в 23:21
поделиться

2 ответа

Я бы поместил каждый вход в диапазон с помощью 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>
26
ответ дан 3 December 2019 в 13:40
поделиться

Вы можете заключить свои входные данные в метки и затем используйте CSS: 

 label {display: inline-block;} input {display: block;}
17
ответ дан 3 December 2019 в 13:40
поделиться