WEBに関してあれこれ。
トップページ>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の値を同じに。