ラベルのアライメント

Question

どのように私は次のコードで水平に整列するラベルを取得することができます

div { 
 
    display: table; 
 
    width: 200px; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

参照：https://jsfiddle.net/a7t3qnbg/1/

編集：より明確にすると：私は固定幅を変更することはできませんし、ラベルをチェックボックスと同じ行で開始し、横線（改行後も）に並べるようにします。

Answer 1

div labelにwidth: 100%を追加します。

div { 
 
    display: table; 
 
    width: 200px; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
} 
 
div label { 
 
    width: 100%; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

Answer 2

あなたは、ディスプレイを使用することができますインライン

div { 
    display: table; 
    width: 200px; 
} 
div input, div label { 
    display: inline; 
} 

Answer 3

は、これは簡単にインラインブロックを使用して達成することができます。

https://jsfiddle.net/a7t3qnbg/2/

div { 
    width: auto; 
} 
div input, div label { 
    display: inline-block; 
} 

を使用すると、表示を続ける「する必要がある」場合はお知らせ：あなたのレイアウトとしてのテーブル。

Answer 4

div { 
 
width: auto; 
 
} 
 
div input, div label { 
 
display: inline-block; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

Answer 5

このような何か？

div { 
 
    display: table; 
 
    width: 300px; 
 
} 
 
div input, 
 
div label { 
 
    display: inline; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

Answer 6

あなたはCSSにラベルを追加し、あなたが

たい幅を調整することができます

div { 
 
    display: table; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 300px; 
 
    text-align: left; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

Answer 7

あなたはこれらのラベルを整列するために、テーブルのプロパティを使用する必要はありません。あなたがテーブルとして表示を使用している場合でも、それぞれの内側のdivがあなただけにも（入力のデフォルトの表示を）labelためinline-blockを使用とvertical-alignを追加することができ、テーブルの行

Answer 8

することができます。 Inputはと表示されず、table-cellと表示されず、特定のプロパティを継承しません。

white-spaceを使用して、両方の要素を同じ行に保つことができます。

div { 
 
    width: 200px; 
 
    white-space:nowrap; 
 
} 
 
div input, 
 
div label { 
 
    vertical-align:middle;/* or top or any other value that suits your needs */ 
 
    display:inline-block;/* usefull to label */ 
 
    white-space:normal;/* reset usefull to label */ 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>