Проблема с заполнением при создании панели навигации
Я только начал изучать HTML и CSS и хочу создать панель навигации. Я столкнулся с проблемой: при наведении на ссылку под каждой из моих ссылок появляется странное дополнение, как показано на рисунках. Есть ли способы решить проблему, не удаляя отступы?
Браузер: Microsoft Edge 126.0.2592.87.
h1 {
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-weight: normal;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #131842;
}
.navbar a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}
.navbar a:hover {
background-color: #405D72;
}<header>
<nav class = "navbar">
<ul>
<li><a href = "home.html">Home</li>
<li><a href = "projects.html">Projects</li>
<li><a href = "about.html">About</li>
</ul>
</nav>
</header>Я смотрел это видео и ожидал аналогичного результата, показанного на видео.
https://thewikihow.com/video_f3uCSh6LIY0&t=232s
Навигация в видео:
Ответы 2
Ваша проблема возникает из-за того, что вы не закрываете теги <a>.
Для баров <nav> не требуются теги <ul> и <li>... только теги <a>. В результате получится более простая структура, более надежная и доступная. Посмотрите этот фрагмент.
nav {
background-color: #131842;
}
nav a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}
nav a:hover {
background-color: #405D72;
}<header>
<nav>
<a href = "home.html">Home</a>
<a href = "projects.html">Projects</a>
<a href = "about.html">About</a>
</nav>
</header>Хотя чисто технически правильно, что nav не требует списка ссылок, он все равно должен его использовать. Быть более надежным без него технически неправильно. Основная причина, по которой вам следует это сделать, — это соображения доступности, хотя даже W3C и WHATWG рекомендуют это.
И все же кажется, что реальный опыт пользователей, использующих программы чтения с экрана, показывает, что списки усложняют им жизнь.
может быть, но тогда все сводится к рейтингу доступности, который влияет на SEO. Хотя я согласен, что у обоих есть свои плюсы и минусы, я считаю это утверждение каким-то вводящим в заблуждение и односторонним.
@tacoshy Я не могу найти никаких упоминаний о том, что навигация без ul влияет на показатель доступности. Я проверил его с маяком, и никаких предупреждений или чего-то еще не появилось. Есть ссылка? (ссылка W3C его использует, однако там же написано, что так не обязательно)
Не забудьте добавить закрывающий тег </a>. Вот валидатор разметки, с помощью которого вы сможете проверить свои будущие работы — https://validator.w3.org/
h1 {
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-weight: normal;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #131842;
}
.navbar a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}
.navbar a:hover {
background-color: #405D72;
}<header>
<nav class = "navbar">
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "projects.html">Projects</a></li>
<li><a href = "about.html">About</a></li>
</ul>
</nav>
</header>
Добро пожаловать в ТАК! По теме: вы не закрыли теги привязки
<a>в каждой строке, вот так:<li><a href = "home.html">Home</a></li>