ul {list-style-type: none;}
a {text-decoration: none;}
li {display: inline-block;}
ul {display: flex;}
古いブラウザにも対応させる場合
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display: flex;
justify-content: flex-start; /* 左寄せ */
justify-content: flex-end; /* 右寄せ */
justify-content: center; /* 中央寄せ */
justify-content: space-between; /* 等間隔配置 */
li:not(:last-child) {}
最初の要素以外は(:first-child)になる。
a {display: block;}
<ul class="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
.menu {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
display: inline-block;
padding: 0 10px;
}
.menu a {
color: #000;
text-decoration: none;
}
.menu a:hover {
color: #ccc;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
display: inline-block;
padding: 0 14px;
}
.menu li:not(:last-child) {
border-right: #000 1px solid;
}
.menu a {
color: #000;
text-decoration: none;
}
.menu a:hover {
color: #ccc;
}
.menu {
background: #000;
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
border-left: solid 1px #cecece;
}
.menu li:last-child {
border-right: solid 1px #cecece;
}
.menu a {
color: #fff;
display: block;
padding: 4px 14px;
text-decoration: none;
}
.menu a:hover {
background: #bbb;
color: #000;
}
.menu {
list-style-type: none;
margin: 0 ;
padding: 0;
text-align: center;
}
.menu li {
display: inline-block;
padding: 0 10px;
}
.menu a {
color: #000;
text-decoration: none;
}
.menu a::before {
color: #fff;
content : "\02714" ;
font-size: 1.3em;
}
.menu a:hover::before {
color: #f00;
transition: .5s ;
}
.menu {
border: #000 1px solid;
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
}
.menu li:not(:last-child) {
border-bottom: dotted 1px #000;
}
.menu a {
color: #000;
display: block;
padding: 5px 12px;
text-decoration: none;
}
.menu a:hover {
background: #ddd;
}