0

私はこの簡単なフォームを編集して 3 時間見栄えを良くしようとしてきましたが、まだ十分ではありません. 入力フィールドをラベルと同じ行に自然に配置したいのですが、どういうわけか入力がラベルより少し低く、マージンで編集できないようです。私は何を間違っていますか？

フォームがどのように見えるかの気の利いた写真を次に示します。

http://snag.gy/oPRNy.jpg

// お問い合わせフォーム 

<label for="name"><p>Name:</p></label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject"><p>Subject:</p></label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments"><p>Comments:</p></label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />

// CSS

    label {
    float: none;
    font-size: 100%;
    width: 250px; /* just this width evens out input box placement */
    font-weight: bold;
}
input { /*I think these just fall in because they are naturally following the labels!*/
    width: 250px;
    padding:5px;
    margin-top: -10px;
}
textarea {
    width: 250px;
    height: 150px;
    resize:none;
}
guestbook {
    margin-top:50px;
    text-align:center;
    font-size:26px;
    color:#05924b;
    font-family:Gisha;

}
gb p {
    color:#05924b;
    font-family:Gisha;
    text-align:left;
    margin-left:85px;
    margin-top:0px;
    margin-bottom:0px;
}

// 解決策: フォーム内から "p" パラグラフを削除し、残りを CSS から調整し、異なる入力フィールドと行に float:left を追加し、入力が近くなるようにラベル幅を下げ、計算して正しい余白を配置しました-input{} と textarea{} の両方にアクセスし、最後に #submit にアクセスして、すべてを適切な順序で取得します。新しいコードのスクリーンショットを次に示します: http://snag.gy/PwpbQ.jpg

// CSS

    /* Input */
label {
    float: left;
    font-size: 100%;
    width: 50px; /* just this width evens out input box placement */
    font-weight: bold;
    margin: 2px 0;
    padding:5px;
    font-family: Gisha;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-align: left;
}
input { /*I think these just fall in because they are naturally following the labels!*/
    width: 300px;
    padding:5px;
    margin: 5px 0;
    font-size:24px;
    margin-right:192px;
}
textarea {
    width: 300px;
    height: 150px;
    resize:none;
    margin:5px 0;
    padding:5px;
    margin-right:192px;
}
#submit {
    margin-right:225px; 
}
/* End of input */
4

1 に答える 1

1

<p>ラベルからすべてのタグを取り外します。タグはブロック レベルの<p>要素であるため、インライン要素内にネストすることはできません<label>。ブロック レベルの要素もクリアされます。つまり、どちらの側にもコンテンツを許可しません (フロートしない限り)。これがあなたの問題を引き起こしていると思います。

<label for="name">Name:</label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />

マークアップが調整されると、 タグlabelとinputタグに垂直方向のスペースがなくなります。垂直方向の間隔を追加するには、両方の要素にマージンを追加できます。

label {
    font-size: 100%;
    width: 250px;
    font-weight: bold;
    margin: 2px 0;
}

input {
    width: 250px;
    padding:5px;
    margin: 2px 0;
}

例: http://jsfiddle.net/KZrXD/

于 2012-12-07T01:09:41.287 に答える