JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<nav>
<a href="#">Odkaz</a>
<a href="#">Odkaz</a>
<a href="#">Odkaz</a>
<a href="#">Odkaz</a>
<a href="#">Odkaz</a>
<div class="cleaner"></div>
</nav>
</header>
CSS
.cleaner {
clear: both; /*Clearuje floating elementy*/
}
body {
font-family: Helvetica;
font-weight: 200;
margin: 0;
}
header {
background-color: #fff;
font-size: 0; /*Jinak by pod odkazy byl ještě malý řádek*/
left: 0;
position: fixed; /*Fixní pozice menu*/
text-align: center; /*Nastavil jsem nav display na inline-block, díky tomuto se pak zarovná na střed*/
top: 0;
width: 100%; /*Aby se roztáhl na 100% šířku*/
}
header nav {
display: inline-block; /*Kvůli zarovnání na střed*/
padding: 0 20px;
}
header nav a {
color: #000;
float: left; /*Nastaví odkazům display: block a zároveň se budou řadit za sebou*/
font-size: 13px;
padding: 20px 10px;
text-decoration: none;
text-transform: uppercase;
}
header nav a:hover {
background-color: #EEEEEE;
}