14

これまでの私の仕事は次のとおりです。

http://jsfiddle.net/2RCBQ/

<div id="main">
<form>
    <label>First Name:<input type="text" id="firstname"></label><br/>
    <label>Last Name:<input type="text" id="lastname"></label><br>
    <label>E-Mail:<input type="text" id="email"></label><br/>
    <label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>

CSS

#main {
    width:300px;

}  

#main input {
    float:right;
    display:inline;
}

#main label {
    color: #2D2D2D;
    font-size: 15px;
    width:250px;
    display: block;
}

現在、ラベル (左側) は、入力フィールド (右側) の上部に向かっています。入力フィールドの真ん中にあるので、ラベルを縦に並べたいです。

垂直方向の位置合わせを試みましたが、機能しません。問題を解決するのを手伝ってください。ありがとう。

4

5 に答える 5

19

<span>入れ子にすることで不要なマークアップが大量に追加されているように感じます。

display: inline-blockと を と同じように並べて配置できますが、ドキュメント フローを中断することは<label>ありません。さらに、はるかに柔軟で、あなた (またはユーザーのスクリーン リーダー) が.<input>float: rightfont-size

編集：jsfiddle

label, input {
    display: inline-block;
    vertical-align: baseline;
    width: 125px;
}

label {
    color: #2D2D2D;
    font-size: 15px;
}

form, input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

form {
    width: 300px;
}
<form>
    <label for="firstname">First Name:</label><input type="text" id="firstname">
    <label for="lastname">Last Name:</label><input type="text" id="lastname">
    <label for="email">E-Mail:</label><input type="text" id="email">
    <label for="phone">Phone:</label><input type="text" id="phone">
</form>

于 2013-03-04T04:16:37.740 に答える
1

html:

ラベルにスパンを追加して、テキスト ラベルに固有のスタイルを追加できるようにします。

<div id="main">
    <form>
        <label><span>First Name:</span><input type="text" id="firstname"></label><br/>
        <label><span>Last Name:</span><input type="text" id="lastname"></label><br>
        <label><span>E-Mail:</span><input type="text" id="email"></label><br/>
        <label><span>Phone:</span><input type="text" id="phone"></label><br/>
    </form>
</div>

CSS:

#main label span {
    position:relative;
    top:2px;
}

デモ

于 2013-03-04T03:06:43.077 に答える
0

要素をスパンで囲み、<label>スパンをに設定vertical-alignできますmiddle

HTML

<div id="main">
    <form> <span><label>First Name:<input type="text" id="firstname" /></label></span>
        <br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span>
        <br/> <span><label>E-Mail:<input type="text" id="email" /></label></span>
        <br/> <span><label>Phone:<input type="text" id="phone" /></label></span>
        <br/>
    </form>
</div>

CSS

#main {
    width:300px;
}
#main input {
    float:right;
    display:inline;
}
#main label {
    color: #2D2D2D;
    font-size: 15px;
}
#main span {
    display: table-cell;
    vertical-align: middle;
    width:250px;
}

http://jsfiddle.net/2RCBQ/2/

于 2013-03-04T03:02:56.577 に答える