リスト < li > タグの横並び時の隙間をなくす方法
リストタグはメニューなどでよく使いますが、リストをdisplay:inline-block
を使って横並びにするとリストとリストの間に隙間ができてしまいます。それを簡単な方法で解決します。
解決方法
CSS(スタイルシート)で、親のul
にfont-size: 0
を入れる。
ul {
font-size: 0;
}
li{
display: inline-block;
}
他にもいくつか方法があるようですが、私はこの方法を使っています。
別の方法
HTMLの方で改行せずに書く。
<ul>
<li>メニュー1</li><li>メニュー2</li><li>メニュー3</li>
</ul>
-
前の記事
記事がありません
-
次の記事
npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも) 2020.05.18
コメントを書く