Самый простой вариант разметки — задать элементам списка одинаковую ширину, указав ее в процентах относительно ширины элемента-контейнера.
Разметка HTML
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav> |
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Стили CSS
nav {
display: block;
position: relative;
}
nav:after {
content: "";
display: block;
width: 100%;
height: 5px;
position: absolute;
left: 0;
background: linear-gradient(90deg,
#CDE0EE, #CDE0EE 20%,
#EBF0F3 20%, #EBF0F3 40%,
#9BB0C1 40%, #9BB0C1 60%,
#5D8BAD 60%, #5D8BAD 80%,
#041E34 80%, #041E34 100%);
}
ul {
width: 660px;
margin: 0 auto;
padding-left: 0;
list-style: none;
overflow: hidden;
}
li {
float: left;
width: 25%;
}
a {
text-decoration: none;
text-align: center;
display: block;
color: #868686;
padding: 0.5em 0;
font-size: 2em;
font-weight: bold;
transition: 0.5s ease-in-out;
font-family: 'Montez', cursive; /*скачать шрифт можно с сайта https://www.google.com/fonts/*/
}
a:hover {
color: #f70211;
} |
nav {
display: block;
position: relative;
}
nav:after {
content: "";
display: block;
width: 100%;
height: 5px;
position: absolute;
left: 0;
background: linear-gradient(90deg,
#CDE0EE, #CDE0EE 20%,
#EBF0F3 20%, #EBF0F3 40%,
#9BB0C1 40%, #9BB0C1 60%,
#5D8BAD 60%, #5D8BAD 80%,
#041E34 80%, #041E34 100%);
}
ul {
width: 660px;
margin: 0 auto;
padding-left: 0;
list-style: none;
overflow: hidden;
}
li {
float: left;
width: 25%;
}
a {
text-decoration: none;
text-align: center;
display: block;
color: #868686;
padding: 0.5em 0;
font-size: 2em;
font-weight: bold;
transition: 0.5s ease-in-out;
font-family: 'Montez', cursive; /*скачать шрифт можно с сайта https://www.google.com/fonts/*/
}
a:hover {
color: #f70211;
}
Поделиться "Горизонтальное меню с элементами одинаковой ширины"
Похожее
Comments are closed