display: inline-blockを使って、横並びのメニューを作る方法です。
index.html
<ulclass="nav"><li><ahref="#">Menu1</a></li><li><ahref="#">Menu2</a></li><li><ahref="#">Menu3</a></li></ul>style.css
.nav{list-style:none;font-size:0;}.navli{display:inline-block;width:160px;height:48px;line-height:48px;text-align:center;font-size:16px;background-color:#333;}.navlia{text-decoration:none;color:#fff;font-weight:bold;}- list-style: none; 黒丸を消します。
- font-size: 0; ボタンの間にできる隙間を消します。（子要素でfont-sizeを指定し直します）
- display: inline-block; ボタンを横並びにします。
- line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
- text-align: center; テキストをボタンの左右中央に配置します。
- text-decoration: none; リンクの下線を消します。