2018年9月15日土曜日

リスト(ul,li)を縦横に並べる

トップページに機能一覧を鉢したいのですが、AWSの機能一覧みたいに並べたいなと思います。で、やり方を調べたところ、まさにやりたい事が纏めてあるサイトがありました。

CSSでリストから表を作る方法!2列、3列、4列のレイアウトはこうすれば良いけど罫線が問題

今回はサンプル3を利用させていただきました。
ul.listtest3 {
    display: table;
    width:100%;
}
ul.listtest3 > li:nth-child(3n+1) {
    clear: both;
}
ul.listtest3 > li {
    display: table-cell;
    float: left;
    width: 33%;
}

あとは少し行間を調整します。

【CSS】line-heightで行間を調整する方法:おすすめの値は? 

0 件のコメント:

コメントを投稿