Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

CSS

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;
}

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX