W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

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%設定すればいいんじゃないの?

名無し

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

名無しさんの回答

IE8以上だけど、display:table,display:table-cell を使うのはどうですか?

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

http://ib-ennoshita.jp/2008/04/24-ogawa.html
名無し

ありがとうございます!出来ました。出来れば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 で何とかするしかないでしょう。

名無し

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

名無しさんの回答

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

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

http://unimakura.jp/htmlcss/css3-list-menu.html
名無し

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

名無しさんの回答

expressionでliの横幅を%指定するとか。

expressionを使ってIE6, 7で均等幅なメニュー - jsdo.it - Share JavaScript, HTML...

http://jsdo.it/ksk1015/4Jsn
名無し

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

最終更新日:2012-04-12 (39,186 views)

関連するトピックス

ページ上部に戻る