Вопросы Теги

Как я делаю целую область элемента списка в моей панели навигации, активируемой по щелчку как ссылка?

Мне сделали горизонтальную панель навигации из незаказанного списка, и каждый элемент списка имеет большое дополнение, чтобы заставить его выглядеть хорошим, но единственной областью, которая работает ссылкой, является сам текст. Как я могу позволить пользователю нажать где-нибудь в элементе списка к активному на ссылку?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}
<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>
90
задан j08691 23 May 2017 в 15:56
поделиться

2 ответа

Не вставляйте padding в элемент 'li'. Вместо этого задайте тегу якоря display:inline-block; и примените к нему padding.

106
ответ дан 24 November 2019 в 07:02
поделиться

Сделайте так, чтобы тег якоря содержал padding, а не li. Таким образом, он будет занимать всю область.

12
ответ дан 24 November 2019 в 07:02
поделиться