【html・CSS】labelタグ内で改行する方法

labelの中の文字はbrで改行できます。

<label><input type="checkbox"> ラベル一行目<br>ラベル二行目</label>

しかし、ただ改行すると一行目と二行目の文頭がそろいません。

labelタグ内で改行して文頭をそろえる方法を解説します。

htmlだけで文頭をそろえる

下記はhtmlだけで頭揃えした例です。

空白でそろえる

二行目の頭を空白で調節します。

<label><input type="checkbox">ラベル一行目<br>&nbsp;&nbsp;ラベル二行目</label>

「 」は半角スペースをつくる特殊文字です。

ただし、空白を調整目的で使うのはあまりよくありません。

しかもまだビミョーにずれています。

tableでそろえる

tableでinputとlabelを横並べします。

<table>
    <tr>
        <td valign="top"><input type="checkbox" id="example"></td>
        <td><label for="example">ラベル一行目<br>ラベル二行目</label></td>
    </tr>
</table>

inputがlabelの中にあるときはいいのですが、外にあるときは両者をつなげる必要があります。

inputにid、labelにforを使い同じ名前を指定します。他のidと重複しないように気を付けましょう。

これできれいにそろいましたが、tableは本来、表（ひょう）として使うべきでレイアウト目的で使うのはあまりよくありません。

できればCSSで調整しましょう。

CSSで文頭をそろえる

position: absoluteで飛ばす

「position: absolute」は要素を任意の位置に移動させるCSSです。

<style>
.example{
    display: inline-block;
    margin-left: 2em;
    position: relative;
}
.example input{
    position: absolute;
    left: -1.2em;
    top: 0.5em;
}
</style>
    
<label class="example"><input type="checkbox">ラベル一行目<br>ラベル二行目</label>

inputにposition: absoluteを指定するとinputが無視されたように再配置されます。これによりlabelの文頭がそろいます。

labelの左にチェックボックスを置くスペースを確保するため「margin-left: 2em」を指定しています。

これだけでは二行目が置いてけぼりになるため「display: inline-block」または「display: block」を指定しましょう。

あとはチェックボックスの位置をleftやtopで調整します。

display: inline-blockで横並べ

「display: inline-block」を使うと要素を横並べできます。

<style>
.example2 input{
    margin: 0.4em;
    vertical-align: top;

}
.example2 label{
    display: inline-block;
}
</style>
    
<div class="example2">
    <input type="checkbox" id="example2">
    <label for="example2">ラベル一行目<br>ラベル二行目</label>
</div>

さらに「vertical-align: top」を指定すると上揃えになります。

これでinputとlabelを分けて横並べできます。

inputにmarginを指定して位置やlabelとのスペースを調整しましょう。

この方法ではinputとlabelが兄弟要素になるためidとforでつなぐ手間が発生します。

ちなみにinputタグは標準で「display: inline-block」がかかっています。

【おまけ】labelタグ単位で改行 display:block

labelタグはインライン要素であるため横に並んでしまいます。

labelごとに改行するにはlabelに「display:block」を指定します。

<style>
.example3 label{
    display: block;
    cursor: pointer;
}
</style>
    
<div class="example3">
    <label><input type="radio" name="example"> ラベル1</label>
    <label><input type="radio" name="example"> ラベル2</label>
    <label><input type="radio" name="example"> ラベル3</label>
</div>

【まとめ】labelタグ内で改行して文頭をそろえる方法

htmlだけ

二行目の文頭に空白スペースを置き調節する。

tableでinputとlabelを横並べする。

CSS

inputにposition:absoluteを指定して、チェックボックスを飛ばす。

labelにdisplay:inline-blockを指定して、inputと横並べする。

以上、labelタグ内で改行して文頭をそろえる方法でした。