表单字段：字段顶部的标题？

Question

如何将标题放在表单字段的顶部而不是默认情况下？无论如何要修复CSS中的代码吗？

<label>Input Number</label>
        <input type="text" id="inputnumber" />

我不想使用break标记。这只会在标题和字段之间增加更多空间。

Answer 1

使用以下CSS：

 <style type="text/css">
     label {
         display: block;
     }
 </style>

或者使用css类，如果你想只打破一些标签：

.block-label {
    display: block;
}
....
<label class="block-label">Input Number</label>

Answer 2

你想要一些like this吗？

HTML：

<form>
    <label for="inputnumber1">Input Number 1</label>
    <input type="text" id="inputnumber1" />
    <label for="inputnumber2">Input Number 2</label>
    <input type="text" id="inputnumber2" />
</form>

CSS：

input {
    margin-top: 20px;
}
label {
    position: absolute;
}

Answer 3

我将2个标签放在一起，并使用break标签分隔相关的标签。然后调整css间距。它非常有效。谢谢大家。

Answer 4

试试这个： -

<label>Input Number</label>
<input type="text" id="inputnumber" />

label {
    display:block;
}
input {
    display:block;
}

更新

您可以通过多种方式实现列布局： -

1）使用浮动分区

HTML

<div class="column">
    <label>Input Number</label>
    <input type="text" id="inputnumber" />
</div>
<div class="column">
    <label>Input Text</label>
    <input type="text" id="inputtext" />
</div>

的CSS

label {
    display:block;
}
input {
    display:block;
}
div.column
{
    float:left;
}

2）使用表格布局

HTML

与上述相同的HTML

的CSS

label {
    display:block;
}
input {
    display:block;
}
div.column
{
    display:table-cell;
}

3）实际表格

HTML

<table>
    <tr>
        <th>
            <label>Input Number</label>
        </th>
        <th>
            <label>Input Text</label>
        </th>
    </tr>
    <tr>
        <th>
            <input type="text" id="inputnumber" />
        </th>
        <th>
            <input type="text" id="inputtext" />
        </th>
    </tr>
</table>