作成例
状態:結論(後で見返す用)
閲覧数:1,495
投稿日:2017-07-15
更新日:2023-02-13
hrタグにwidth指定して点線表示
・中央表示
左端に寄せる
・text-align:left;
・インライン → ブロック要素変更指定
width指定は%の方が良いと思われ
・モバイルでレイアウト崩れが発生
・<hr>にwidth指定したことを忘れていたため、原因解決に手間取る
→ 修正後コード
・水平線＜hr＞を点線にしたい
・中央表示
header hr{
width: 25em;
border: none;
border-top: 1px dashed #bbb;
}hr{
border:none;
border-top:dashed 1px #9E9E9E;
height:1px;
color:#FFFFFF;
width:50rem;
}
左端に寄せる
・text-align:left;
・インライン → ブロック要素変更指定
hr{
border:none;
border-top:dashed 1px #9E9E9E;
height:1px;
color:#FFFFFF;
width:50rem;
text-align:left;
display:inline-block;
}
width指定は%の方が良いと思われ
・モバイルでレイアウト崩れが発生
・<hr>にwidth指定したことを忘れていたため、原因解決に手間取る
→ 修正後コード
・article hr{
border:none;
border-top:dashed 1px #9E9E9E;
height:1px;
color:#FFFFFF;
width:90%;
text-align:center;
display:block;
}・水平線＜hr＞を点線にしたい