【css】table-layoutについて（floatを使わず横並びにする方法）

2016年1月17日

普段、boxを横並びに作成する際に「float」を使っているが、
他にも便利な方法があった！

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

1

2

3

4

5

6

7

ul{

display:table;

table-layout:fixed;

}

ul li{

display:table-cell;

}

table-layout:fixedによって、
自動で幅が均等に調整されるらしい

参考サイト：
http://www.htmq.com/style/table-layout.shtml
http://cookbook.webcrow.jp/chapter/index.html

関連記事

2017年4月19日超便利！ img要素を表示領域（枠内）で上下左右に中央表示させる方法
2016年12月8日 IE7・8も簡単に対応！ IEのバージョンごとに cssを適用させるhtml・cssハック
2016年12月10日 Safariで崩れる！？ floatを使わずdisplay:inline-blockで横並びにする方法
2019年1月30日【css】文字（テキスト）にborderをつけるように縁取りをする方法
2016年12月12日便利！使われていないCSSの記述を見つけ出す方法（Google chrome使用）

スポンサードリンク