Houn

Web制作

公開日:2019.08.17

更新日:2022.05.02

横並びのliタグをカンマで区切る方法

WordPressのウィジェット設定でカテゴリを設置すると、デフォルトではこんな表示になるのを↓

cat-li-default

こういう、横並びにして且つカンマで区切ってあげる表示にしたかったので↓

cat-li-comma

以下、そのCSSの書き方です。

CSSの記述

cat-itemって、カテゴリウィジェットを設置するとそれぞれのカテゴリ項目(liタグ)にWordPressが自動で当ててくるクラス名ですね。それをdisplay: inline-block;で横並びに切り替えます。

で、あとはコメントの通りといったところですね。