問題点
以下は子要素がすべて display: inline-block;により横並びになっている。
この場合要素間(<time>,<span>の間)に改行が半角スペースとして要素の間に挿入されてしまう。
<liclass="scroll-item"><ahref="#"><timeclass="date"datetime="2019-10-19">2019.10.19 SUN</time><spanclass="category news">NEWS</span><spanclass="title">aaaを更新しました。</span></a></li><liclass="scroll-item"><ahref="#"><timeclass="date"datetime="2019-10-19">2019.10.19 SUN</time><spanclass="category">TOPIC</span><spanclass="title">あいうえお</span></a></li>.scroll-list.date{/* border: 1px solid red; */display:inline-block;width:19%;font-size:1.0rem;}.scroll-list.category{display:inline-block;width:8%;font-size:1.0rem;}.scroll-list.title{display:inline-block;width:73%;padding-left:15px;font-size:1.0rem;}その半角スペースのせいでwidthが100%を超えてしまい、横幅に納まり切らなくなる。
解決
親要素にfont-size: 0;を記述することで挿入された半角スペースのサイズを0にする。
.scroll-list.scroll-itema{/* border: 1px solid red; */display:block;padding:10px15px;color:#333;transition:background-color0.1s;font-size:0;}そうすると子要素も0になり文字が表示されなくなってしまうので、font-size: 1.0rem;のように指定し直す必要がある。
.scroll-list.date{/* border: 1px solid red; */display:inline-block;width:19%;font-size:1.0rem;}.scroll-list.category{display:inline-block;width:8%;font-size:1.0rem;}.scroll-list.title{display:inline-block;width:73%;padding-left:15px;font-size:1.0rem;}
