display:tableとdisplay:table-cell
横並び
code:HTML
<ul class="nav">
<li class="nav__item"><a href="#">WORKS</a></li>
<li class="nav__item"><a href="#">NEWS</a></li>
<li class="nav__item"><a href="#">RECRUIT</a></li>
<li class="nav__item"><a href="#">ABOUT</a></li>
<li class="nav__item"><a href="#">CONTACT</a></li>
</ul>
code:css
.nav {
display: table;
width: 100%;
background: #FFF;
}
.nav__item {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.nav__item + .nav__item {
border-left: 1px solid #CCC;
}
.nav__item a {
display: block;
padding: 15px 0;
color: #666;
text-decoration: none;
font-size: 14px;
}