リンクを横に並べたメニューの作り方 | How to make a menu with links arranged side by side

HTML

<div class="menu">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Vue.js</a></li>
</ul>
</div>

CSS

.menu {
padding: 20px;
background-color: #d5dadf;
}
.menu ul {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
list-style: none;
}
.menu li a {
display: block;
padding: 10px;
color: #000;
border-right: solid 1px #aaa;
text-decoration: none;
}
.menu li a:hover {
background-color: #eee;
}
.menu li {
float: left;
width: 25%;
text-align: center;
}
.menu li:first-child a {
border-left: solid 1px #aaa;
}
.menu ul::after {
content: "";
display: block;
clear: both;
}

　

.menu li aセレクタにborder-right: solid 1px #aaa;として右に線を入れてます。また.menu liセレクタにて:first-child a とし、メニューの最初の左にも線を入れています。| Put a line on the right as border-right: solid 1px #aaa; in the .menu li a selector. I also set: first-child a in the .menu li selector and put a line to the left of the beginning of the menu.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.