ul,liを使った横並びのメニューについてです。
ulを800px幅にして、liを自動的に均等幅で並べたいのですが、良い方法はないでしょうか。
- liの数が1,2個増減する予定なので、liにpxで幅指定はできません。
- 作成後はcssの編集はできません。
- table td を使えば自動的に均等幅になるのですがあまり使いたくありません。
ul,table{width: 800px;}
li{float:left;}
<ul>
<li><a href="/">home</a></li>
<li><a href="/">menu1</a></li>
<li><a href="/">menu2</a></li>
<li><a href="/">menu3</a></li>
<li><a href="/">menu4</a></li>
</ul>
<table>
<tr>
<td><a href="/">home</a></td>
<td><a href="/">menu1</a></td>
<td><a href="/">menu2</a></td>
<td><a href="/">menu3</a></td>
<td><a href="/">menu4</a></td>
</tr>
</table>
みんなの回答 6 件
え!? liのwidthを100%設定すればいいんじゃないの?
IE8以上だけど、display:table,display:table-cell を使うのはどうですか?
CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
http://ib-ennoshita.jp/2008/04/24-ogawa.html出来ればIE7にも対応したいので、他の方法がありましたら教えてください。
上記で回答いただいた
display:table,display:table-cellでIE8以上には対応できました。
ul{
display:table;
width:800px;
}
li{
display:table-cell;
}
<ul>
<li><a href="/">home</a></li>
<li><a href="/">menu1</a></li>
<li><a href="/">menu2</a></li>
<li><a href="/">menu3</a></li>
<li><a href="/">menu4</a></li>
</ul>
IE7 以下に対応させるのでしたら苦肉の策ですが <table> にしてしまうか、JavaScript で何とかするしかないでしょう。
display:box、box-flex:1を使う方法もありますが、IEでは表示できないかな。回避するようなJSでもあれば良いですね。
リンク先に掲載されている「サンプル2」の方法は、可変するliの数に応じ固定幅以内に均等に配置してくれます。
CSS3で横並びのメニューを簡単に作る方法
http://unimakura.jp/htmlcss/css3-list-menu.htmlexpressionでliの横幅を%指定するとか。
expressionを使ってIE6, 7で均等幅なメニュー - jsdo.it - Share JavaScript, HTML...
http://jsdo.it/ksk1015/4Jsn関連するトピックス