CSS inline-blockで横並びメニューを設定する方法
環境
Google Chrome 111.0.5563.65(Official Build)
Windows 10 Home 64bit
書式
display: inline-block
横に並べる+幅と高さを指定します
ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。
またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.tabnav {
list-style: none;
}
.tabnav li {
width: 120px;
text-align: center;
background-color:skyblue;
display: inline-block; /*横並びにする*/
}
.tabnav li a {
text-decoration: none;
color:red;
}
</style>
</head>
<body>
<ul class="tabnav">
<li><a href="#">東京</a></li>
<li><a href="#">大阪</a></li>
<li><a href="#">福岡</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.tabnav {
list-style: none;
}
.tabnav li {
width: 120px;
text-align: center;
background-color:skyblue;
display: inline-block; /*横並びにする*/
}
.tabnav li a {
text-decoration: none;
color:red;
}
</style>
</head>
<body>
<ul class="tabnav">
<li><a href="#">東京</a></li>
<li><a href="#">大阪</a></li>
<li><a href="#">福岡</a></li>
</ul>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> .tabnav { list-style: none; } .tabnav li { width: 120px; text-align: center; background-color:skyblue; display: inline-block; /*横並びにする*/ } .tabnav li a { text-decoration: none; color:red; } </style> </head> <body> <ul class="tabnav"> <li><a href="#">東京</a></li> <li><a href="#">大阪</a></li> <li><a href="#">福岡</a></li> </ul> </body> </html>
結果
文字「東京」、「大阪」、「福岡」メニューが横並びま