Как сделать - Ссылки меню равной ширины
Узнайте, как создать панель навигации с навигационными ссылками одинаковой ширины на сайте.
Ссылки меню равной ширины
Создайте адаптивную панель навигации
Шаг 1) Добавить HTML:
Пример
<!-- Меню навигации -->
<div class="navbar">
<a class="active" href="#">Главная</a>
<a href="#">Поиск</a>
<a href="#">Контакты</a>
<a href="#">Авторизация</a>
</div>
Шаг 2) Добавить CSS:
Пример
/* Стиль меню навигации */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Навигационные ссылки */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Четыре звена одинаковой ширины. Если у вас две ссылки, используйте 50% и 33,33% для трех ссылок и т.д. */
text-align: center;
/* Если вы хотите, чтобы текст был по центру */
}
/* Добавить цвет фона при наведении указателя мыши */
.navbar a:hover {
background-color: #000;
}
/* Стиль текущей / активной ссылки */
.navbar a.active {
background-color: #04AA6D;
}
/* Добавьте адаптивности - на экранах менее 500 пикселей сделайте так, чтобы ссылки навигации отображались друг над другом, а не рядом друг с другом */
@media screen and
(max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* Если вы хотите, чтобы текст был выровнен по левому краю на маленьких экранах */
}
}
Попробуйте сами »
Навигационные ссылки одинаковой ширины с иконками
Совет: Перейдите к учебнику CSS Навбар на нашем сайте W3Schools на русском, чтобы узнать больше о панелях навигации.