CSS inline-blockで横並びメニューを設定する方法

環境
Google Chrome 111.0.5563.65(Official Build)
Windows 10 Home 64bit

書式
display: inline-block
横に並べる+幅と高さを指定します
ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。
またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>

結果
文字「東京」、「大阪」、「福岡」メニューが横並びま

CSS

Posted by arkgame