トップページ>CSSで横並びメニュー

CSSで横並びメニュー

サンプル

HTML部分


<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>

CSS部分


* {
margin: 0;
padding: 0;
}
.menu ul {
margin:  0;
padding: 0;
list-style:none;
}
.menu li {
float: left;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
.menu li a:link,
.menu li a:hover {
color: white;
display: block; 
text-decoration: none;
background-color: black;
}
.menu li a:hover, 
.menu li a:visited {
color: black;
display: block;
text-decoration: none;
background-color: white;
}

説明

floatを使っているので、直下にclear: both;を忘れずに。

liのテキストを中央に表示するため、heightとline-heightの値を同じに。