Как сделать - Меню одинаковой ширины
Узнать, как создать панель навигации с навигационными ссылками одинаковой ширины.
Меню равной ширины
Создание адаптивной панели навигации
Шаг 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: #4CAF50;
}
/* Добавить отзывчивость - на экранах менее 500px, сделать навигационные ссылки появляются поверх друг друга, а не рядом друг с другом */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* Если вы хотите, чтобы текст был выровнен по левому краю на небольших экранах */
}
}
Редактор кода »
Равная ширина навигационных ссылок с иконками
Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.