5

これを整理するのに問題があります。

これが私のhtmlです

<form>
    <p><label for="comp-name">Name:</label>
        <input type="text" name="comp-name"></input>
    </p>
    <p>
        <label for="company-address">Address:</label>
        <textarea name="company-address"></textarea>
    </p>
    <p>
        <label for="postcode">Postcode:</label>
        <input type="text" name="postcode"></input>
    </p>
    <p>
        <label for="phone">Phone Number:</label>
        <input type="text" name="phone"></input>
    </p>
    <p>
        <label for="email">Email:</label>
        <input type="text" name="email"></input>
    </p>
</form>

これが私がフォームをどのように見せたいかです: ここに画像の説明を入力

ここにjsfiddleリンクがあります。

入力/テキストエリアの左上部分にラベルを配置する方法を理解するのに苦労しています。

4

7 に答える 7

9

私が正しく理解していれば、簡単です：

label {
    vertical-align: top;
}

必要な結果が得られるはずです。

フィドル: http://jsfiddle.net/N7e67/2/

于 2013-04-22T14:43:19.023 に答える
3

ラベルをテーブルの左の列に、フィールドを右の列に配置して、セル内に配置するだけです

<table>
    <tr>
        <td>(label)</td>
        <td>(input)</td>
    </tr>
    ...
</table>
于 2013-04-22T14:52:50.843 に答える
2

ラベルと入力タイプを div タグ内に配置してみてください

<p><div><label for="comp-name">Company Name:</label></div>
    <div> <input type="text" name="comp-name"></input></div>
 </p>

これはあなたを助けるはずです。これがあなたが期待したものではない場合は、あなたが見たいものを詳しく説明してください.

于 2013-04-22T14:41:19.937 に答える
1

このボイラープレートhttp://www.csskarma.com/lab/contactForm/またはこのチュートリアルhttp://designfestival.com/position-text-labels-on-forms-using%C2%A0css/を使用して試すことができます

于 2013-04-22T14:35:07.650 に答える
0

オブジェクトの配置には次のコードを使用できます: style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"

フォームのデザインに従って、左、上、高さ、幅を変更します。

<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>
于 2013-04-22T14:31:24.307 に答える