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

2023年3月15日

環境
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>

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

CSS

Posted by arkgame

関連投稿: