[CSS講座] 横並びの方法
- Data
- 2019/06/20
- Tag
flexboxを使う
HTML
<ul class="nav">
<li class="nav_item">Menu1</li>
<li class="nav_item">Menu2</li>
<li class="nav_item">Menu3</li>
<li class="nav_item">Menu4</li>
</ul>CSS
.nav {
padding: 10px;
display: flex;
background-color: #333333;
height: 100px;
/* 縦のセンター寄せ */
justify-content: center;
/* 横のセンター寄せ */
align-items: center;
}
.nav_item {
list-style-type: none;
background-color: #39c;
text-align: center;
border-right: 1px solid #fff;
color: #fff;
width: 100px;
}