CSS: hr 要素(水平線)の「長さ」を指定する
CSSで hr 要素の「長さ」を指定するには、
width プロパティを使用します。
長さの指定は「実数値+単位」や「パーセンテージ」を指定します
(300px、90% 等)。
例)長さ「50%」、太さ「3px」、色「blue」の指定例
hr {
height: 3px;
width: 50%;
background-color: blue;
border: none;
}
次のように指定しても同じ結果になります。
hr {
width: 50%;
border-top: 3px solid blue;
border-right: none;
border-bottom: none;
border-left: none;
}
どちらにせよ、hr 要素の「長さ」を指定するには width プロパティを使用します。
★ 表示結果
hr 要素を左端に寄せたい場合
上の場合、hr 要素が中央に表示されています。
もし hr 要素を左端に寄せたければ、
「margin-left 」プロパティで左マージンの幅を指定してください。
次のように設定すると左側に寄ります。
hr {
height: 3px;
width: 50%;
margin-left: 1px;
background-color: blue;
border: none;
}
★ 表示結果