箇条書き（ulタグ・liタグ）を横2列で並べる方法！

箇条書きのulタグ・liタグはCSSで何の設定もしないと、通常縦に並びます。

さて、この縦に並んだ箇条書きを2列で並べようと思うと少し工夫が必要になります。

さて、箇条書きのタグを横2列で並べる方法ですが、やり方は複数あります。ぜひやりやすいやり方を採用してみて下さい。

floatを使い、横にならべwidthを50%にすることで、横2列を実現しています。
※下記例題ではmarginを入れたため横幅はcalc(50% - 左右のmargin）としています。

flexboxを使って横に並べる方法でも可能です。

widthを50%として、flex-wrap: wrapを指定することで複数行で表示すりょうにしています。
※下記例題ではmarginを入れたため横幅はcalc(50% - 左右のmargin)としています。

いかがでしたでしょうか。通常は縦に並ぶ箇条書きを横2列で表示する方法を紹介してきました。

今回いずれの方法も横幅は50%としましたが、20%を指定すれば5列、10%では10列と横幅を調整することで列数を変更することが出来ます。

float・flexboxどちらのやり方でも実現可能です。ぜひやりやすい方で実装してみて下さい！