横幅100％で区切り線がはみ出る
#ものいじり
/imo-icon/hr.icon/imo-icon/hr-long.icon
ピン留めされたページとそうでないページの間に区切りを設ける方法について探した
秋山博紀さんという方が作ってくださっていた！ありがとうございます
/akiroom/settings（新2： 画面まるごと横切る水平線にしちゃう）
/imo-icon/hr.icon/imo-icon/hr-long.icon
CSSでwidthを100％に指定した際、子要素がはみ出てしまった
ピン留めされたページの下にある区切り線が、リストの横幅から少しはみ出ている
https://gyazo.com/cbd15fc56c6be4cec94baea011f24e15
/imo-icon/hr.icon/imo-icon/hr-long.icon
Scrapboxでは、このように右にmarginが置かれているらしい
しかし、marginを0にしても改善されないため、これは別に関係ない模様
https://gyazo.com/7de8663ebb31e10819d964357abb05af
試しに親要素と同じ1184pxに指定してみる
ぴったりになる、つまり100％に指定した状態でこのようになることを目的とする
https://gyazo.com/f387fb49167e2fd92faae0749a5f4c27
また、width: auto;の指定では以下のようになる
https://gyazo.com/2e2d989ab96a241b4af5b73fe364a7fa
そもそも親要素が違うのだろうか
その線も考慮して作業する
逆に考えるのであれば、親要素のサイズの仕組みを理解すれば良いのだろうか
width: auto;は親要素を含めた最大のサイズが自動的に指定される、とのこと
/imo-icon/hr.icon/imo-icon/hr-long.icon
clear: bothを指定した
これで棒を伸ばせばなんとかなるだろうか
https://gyazo.com/32b8fc0d6f5fa9bd1d3e2b2d5b88b818
/imo-icon/hr.icon/imo-icon/hr-long.icon
最終的に、親要素にoverflow: hidden;を加え、はみ出た部分を隠すことにした
結局borderがはみ出す理由については分からなかった
code:style.css
.page-list.clearfix {
overflow: hidden;
}
.page-list-item.grid-style-item.pin:nth-child(4) {
clear: both;
width: 100%;
height: 0px;
border-top: 2px solid #eee;
margin: 8px 0 22px 0;
}
「子要素がはみ出る」ということに関してはbox-sizingが影響することが多いらしい
今回はそれで改善できなかったが、とりあえず知識としてひとつ手に入った
参考
BOND BLOG　様　【横幅100%で親要素をはみ出す時はbox-sizingを使おう】
https://wunderstand.net/1054/
/imo-icon/hr.icon/imo-icon/hr-long.icon
上記のコードからheight: 0px;の指定を削除すると画像のようになった
何かに使えそうではある
https://gyazo.com/c2fda68fe35b3bece6914983cd4a2a20