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

この記事は2014年9月に旧ブログに書いたものを引っ越しさせました。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください