Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

2021年:インバウンド業界は復活の目途が立たず失業の危機!現実逃避でブログをSwellでリニューアル。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS]ulのリストを見やすく2列にする

floatを使ってulのli リスト を2列にできないだろうか?縦に長くなりがちなリストを左右に振り分ける事で、省スペースにする事ができます。あまり利用価値がないようで、意外と旧サイトでアクセス数が多かったので画像付きで掲載します。

<ul>
<li>1列目</li>
<li>2列目</li>
<li>1列目</li>
<li>2列目</li>
<li>1列目</li>
<li>2列目</li>
</ul>
リスト

リストの内容が左右交互に表示されます

CSSで、liをfloatして、ulの横幅を半分にします。すると、リストが2列になります。

ul{
width: 352px;
list-style: none outside;
}
li{
padding: 0;
float: left;
width: 176px;
}
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる