display:table;

display:table;display:table-cell

親要素にdisplay:table;を、子要素にdisplay:table-cell;を指定すると、テーブルのように横並びをさせることができる。white-spaceプロパティで改行をさせない。

ナビゲーションバーとして使うことが多いので、あえてサイト上部にメニューサンプルを表示させた。レスポンシブデザインに対応させるため左右に10pxの余白。メディアクエリで分ければいいがめんどいので。

<!--html-->
<div id="m1">
<ul id="m2">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
</ul>
</div>

/*css*/
html,body,ul,li {
	margin:0;padding:0;
	}
#m1 {
	margin:0 10px;
	}
ul {
	background:#88f;
	display:table;
	table-layout:fixed;
	width:100%;
}
ul li {
	display:table-cell;
	white-space:nowrap;
	text-align:center;
	line-height:40px;

}
ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	font-size:24px;
	}
ul li:not(:last-child) {
	border-right:solid 1px #fff;
	}

floatの代わりに使いたいところだが、IE8以下に対応していないプロパティなのが難点。

加えて、table-layout:fixed;とwidth:100%;を指定する。table-layout:fixed;で固定しないと、文字数が多い文字のcell程横幅が広くなってしまう。liに対してwidth:25%などのwidthを指定することでも同様の効果が得られる。

white-space:nowrapは改行やタブが半角スペースになってしまうというもので、改行させないための記述。初期値はnormal。

それを防ぐための記述。width:90%;でtext-align:center;でも中央配置されない。そこで、

左右は包括ブロック（ここではnav）に左右marginを指定すれば空白が開く。

参考page

display:inline-block

inline-blockはブロックレベル要素のようにwidthやheightを指定でき、マウスが広がり、インライン要素のように横並びされる（floatを使わず）。

IE7以下はデフォルト対応できないため、スターハックで以下を追加する。

/*css*/
ul#m3 li {
	display:inline-block;
	*display:inline; /*IE*/
	*zoom:1; /*IE*/
	}

間の余白はletter-spacingで取り除ける。

<!--html-->
<ul id="m3">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
</ul>

/*css*/
ul#m4 {
	letter-spacing:-0.4em;
	}
ul#m4 li {
	display:inline-block;
	letter-spacing:normal;
	*display:inline; /*IE*/
	*zoom:1; /*IE*/
	}

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>