web-dev-qa-db-ja.com

テキスト揃え：右; <label>で機能していません

単純に、テキストを<label>要素。

[〜＃〜] html [〜＃〜]

<div id="contact_form">
 <label for="name" id="name_label">Name:</label>
 </div>

[〜＃〜] css [〜＃〜]

#contact_form label {
  text-align: right;
}

マイページ： http://freshbeer.lv/development/en/contact.php

名前、電話、電子メールなどのラベルが左に並んでいるのがわかりますが、右に揃える必要があるので、誰か提案してください。

htmlcssformslabelalignment
32
Ilja

Labelはインライン要素です。したがって、幅が定義されていない限り、その幅は文字の幅とまったく同じです。 div要素はブロック要素なので、その幅はデフォルトで100％です。

text-align: right;をケースのdiv要素に配置するか、display: block;をlabelに適用する必要があります。

別のオプションは、各ラベルの幅を設定し、text-alignを使用することです。これを使用する場合、display: blockメソッドは不要です。

59
janhartmann

テキストは、ラベルを含む任意の要素の内側で右揃えにすることができます。

HTML：

<label>Text</label>

Css：

label {display:block; width:x; height:y; text-align:right;}

このようにして、ラベルに幅と高さを与え、その中のテキストを右に揃えます。

3
Gui Premonsa