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>

登録日:2012-04-11 · カテゴリー:HTML・CSS

みんなの回答 6 件

え!? liのwidthを100%設定すればいいんじゃないの?

2012-04-11

800pxのボックス(li)が縦に並びます・・・

2012-04-11

ありがとうございます!出来ました。出来ればIE7にも対応したいです・・・

出来れば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 で何とかするしかないでしょう。

2012-04-12

ありがとうございます!tableならIE6まで行けちゃうんですけどね・・・

display:box、box-flex:1を使う方法もありますが、IEでは表示できないかな。回避するようなJSでもあれば良いですね。
リンク先に掲載されている「サンプル2」の方法は、可変するliの数に応じ固定幅以内に均等に配置してくれます。

CSS3で横並びのメニューを簡単に作る方法

http://unimakura.jp/htmlcss/css3-list-menu.html
2012-04-12

ありがとうございます!box-flex知らなかったです。勉強になります!

2012-04-12

ありがとうございます!expression知らなかったです。サンプルまでありがとうございます!

回答の受付は終了しました。

関連トピック