CSSで横並びメニュー [WEBの基本]

最新のInternet Explorer、Firefox、Opera、Google Chromeでご覧ください。

htmlやCSSに関してあれこれ。

掲載している情報はご自由にお使いください。

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

CSSで横並びメニュー

サンプル

回り込み解除

HTML部分

<ul class="menu">
<li class="list"><a href="menu.php">menu1</li>
<li class="list"><a href="menu.php">menu2</li>
<li class="list"><a href="menu.php">menu3</li>
<li class="list"><a href="menu.php">menu4</li>
<li><a href="menu.php">menu5</li>
</ul>
<p style="clear: both;">回り込み解除</p>

CSS部分

* {
    margin: 0;
    padding: 0;
}
.menu ul {
    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:visited {
    color: white;
    display: block; 
    text-decoration: none;
    background-color: black;
}
.menu li a:hover, 
.menu li a:active {
    color: black;
    display: block;
    text-decoration: none;
    background-color: white;
}
.list  {
    border-right: solid 1px white;
}

説明

肝はliをfloatするだけです。

floatを使っているので、回り込み解除する為にclear: both;を忘れずに。

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

classのlistは白い区切り線の為に指定しています。