横幅100％で区切り線がはみ出る
ピン留めされたページとそうでないページの間に区切りを設ける方法について探した
秋山博紀さんという方が作ってくださっていた！ありがとうございます
/akiroom/settings（新2： 画面まるごと横切る水平線にしちゃう）
ピン留めされたページの下にある区切り線が、リストの横幅から少しはみ出ている
Scrapboxでは、このように右にmarginが置かれているらしい
しかし、marginを0にしても改善されないため、これは別に関係ない模様
試しに親要素と同じ1184pxに指定してみる
ぴったりになる、つまり100％に指定した状態でこのようになることを目的とする
また、
width: auto; の指定では以下のようになる
そもそも親要素が違うのだろうか
その線も考慮して作業する
逆に考えるのであれば、親要素のサイズの仕組みを理解すれば良いのだろうか
width: auto; は親要素を含めた最大のサイズが自動的に指定される、とのこと clear: both を指定したこれで棒を伸ばせばなんとかなるだろうか
最終的に、親要素に
overflow: hidden; を加え、はみ出た部分を隠すことにした結局borderがはみ出す理由については分からなかった
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を使おう】
上記のコードから
height: 0px; の指定を削除すると画像のようになった何かに使えそうではある
