nav bar
Last updated
Last updated
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #eee;
}
nav {
display: flex;
padding: 0.5em;
background-color: gray;
}
nav > a {
text-decoration: none;
text-align: center;
padding: 0.5em 1em;
background-color: #57ce13;
color: white;
}
/*
⭐️ not first A
= A + A
= A:not(:first-child)
= A:nth-child(n+2)
*/
nav > a + a {
/* ⭐️ add margin to flex items */
margin-inline-start: 0.5em;
}
nav > a:last-child {
font-weight: bold;
background-color: red;
/* ⭐️ `margin: auto` will fill all available space */
margin-inline-start: auto;
}
/* ⭐️ :hover 要擺在正常的 a 後面,不然會沒有作用 */
nav > a:hover {
background-color: blueviolet;
}
<nav>
<a href="https://twitter.com">Twitter</a>
<a href="https://facebook.com">Facebook</a>
<a href="#">Sponsor</a>
</nav>