1

如何将标题放在表单字段的顶部，而不是像默认的那样放在一边？无论如何要修复CSS中的代码吗？

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

我不想使用中断标签。这只是在标题和字段之间增加了更多空间。

4

4 回答 4

1

使用以下 CSS：

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

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

.block-label {
    display: block;
}
....
<label class="block-label">Input Number</label>
于 2013-03-24T04:40:41.900 回答
1

你想要这样的东西吗？

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;
}
于 2013-03-24T07:23:15.090 回答
0

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

于 2013-03-24T16:11:24.693 回答
-2

试试这个：-

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

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

更新

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

1) 使用浮动 div

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>
于 2013-03-24T04:47:02.203 回答