読者です 読者をやめる 読者になる 読者になる

TakayukiKoyama Geek Blog

Create, Entertain, Experience

ul liタグを均等に横並びしたいときのメモ【CSS】

liタグを横並びにして、均等な幅で表示する方法はググるといくつか出てくる。

バナーを横並びにするときに< li >にclassを付加せずにfloat落ちを防ぐ方法 | Magicalog

ul,liを使った横並びのメニューについてです。ulを800px幅にして、liを自動的に均等幅で並べたいのですが、良い方法はないでしょうか。・liの数が1,2個増減する予定なので、liにpxで幅指定はできません。・作成後はcssの編集はできません。・table td を使えば自動... - W3Q

CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog

リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる | bl6.jp

 1から作るときは単にこれらの通りにやればいいんだけど、1度作ったサイトを修正しようとしたときに、なぜうまくいかなかったのでその時用のメモ。

display:table,display:table-cellでやるとき

 たぶんCSSはこうすると思う。

ul{ 
 display:table; 
 table-layout: fixed;
 width:100%; 
} 
li{ 
 display:table-cell; 
} 

 だけど、修正前はdisplay:blockとfloat:leftを使ってて、

 float:leftはそのままにしないといけないものだと思いこんでいた。

 つまり、float:leftは要らないという、それだけの話。

広告を非表示にする