web-dev-qa-db-ja.com

HTMLフォームのラベル要素の行の高さを調整する

_<label>_要素を折り返すフォームがありますが、_<label>_の2行の間隔が広すぎて、_<label>_の行の高さを調整できません。

以下は、同じCSSが適用された_<label>_と_<p>_の例です。ご覧のとおり、_<p>_は正しく調整されていますが、_<label>_は変更されていません。

http://jsfiddle.net/QYzPa/

コード：

_form label,
form p
{    
  font-weight:bold;
  line-height:.7em;
}_
_<form style="width:200px;">
    <fieldset>
         <label for="textarea">In ten or fewer words, explain American history</label>
        <p>In ten or fewer words, explain American history</p>
        <textarea name="textarea" rows="5" ></textarea>
    </fieldset>
</form>_
htmllabelformscss
18
Yarin

すべてのHTMLタグは、その性質を説明するカテゴリに分類されます。この分類は、セマンティクス、動作、相互作用、および他の多くの側面に関連する可能性があります。

pタグとlabelタグはどちらも「フローコンテンツ」タグのカテゴリに分類されます。ただし、その間にわずかな違いが1つあります。labelタグも「フレージングコンテンツ」というカテゴリに分類されます。

これは実際にはどういう意味ですか？ブラウザのデフォルトのレンダリングは、指定されたタグ分類に従い、pタグをブロック要素として扱いますが、labelタグは、デフォルトではインライン要素として扱われます。これを変更するには、デフォルトのCSSルールを上書きします。labelをブロック要素のようにレンダリングするようにブラウザに指示するだけです。

label {
  display: block;
}

インライン（display：inline）の要素はheight、line-height、margin-top、margin-bottom（これらは無視されます）。

インライン要素に高さプロパティを持たせたいが、インライン動作のままにしたい場合は（LINE BREAKの原因はありません）、次のように宣言できます。

label{
 display:inline-block;
}

HTMLのドキュメントを読むことは常に良いことです。 これはカテゴリを示す素敵なグラフです 、特にこれらの小さな癖を処理するときに、多くの時間を節約できます。

42
marcio

マルシオが言っていることは、テキスト内に次々と存在するinline要素（spansやlabelsなど）には指定できないことです。段落全体に適用される属性。

明白なのはtext-align：段落は、個々のspansではなく、配置を指定する必要があります。ように line-height など。

inline要素の反対は、blockまたはdivのようなp要素であり、ページ上で正方形を占め、ページ上で互いに配置されます。より高いブロックレベル。この動作はCSS属性 display で制御されます。これにより、divをspanと同じように動作させることができます。

3
Gman

理由は完全にはわかりませんが、ラベルにdisplay: block;を設定すると機能します

1
Fredrik