1

デフォルトのように横ではなく、フォーム フィールドの上にタイトルを配置するにはどうすればよいですか? CSSでコードを修正する方法はありますか?

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

ブレークタグを使用したくありません。これは、タイトルとフィールドの間にスペースを追加するだけです。

4

4 に答える 4

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 に答える
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 に答える
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 に答える