Блог

Главная - Вопросы по программированию - Отсутствует цвет фона

Отсутствует цвет фона

#html #css

#HTML #css

Вопрос:

В настоящее время я нахожусь в процессе создания основного меню навигации, но, просмотрев множество руководств, я, похоже, не могу исправить часть, которая отсутствует на панели навигации, как показано на рисунке слева возле черной границы.

введите описание изображения здесь

 #mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  border-right: 1px solid black;
  min-width: 300px;
  text-align: center;
  padding: 10px 16px;
}

#mainnav li:first-child a {
  border-left: 1px solid black;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}  
 <nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

Ответ №1:

Добавьте рамку для ваших li файлов и немного уменьшите отступы.

 #mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  min-width: 300px;
  text-align: center;
  padding: 10px 13px;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}  
 <nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

Ответ №2:

Я бы посоветовал вам использовать flex-box вместо встроенного блока — и я изменил некоторые другие стили.

 /* RESET */
* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnav {
  background-color: #4a646c;
}

#mainnav ul {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

#mainnav li {
  border-right: 1px solid black;
}

#mainnav li:first-of-type {
  border-left: 1px solid black;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: block;
  min-width: 300px;
  text-align: center;
  padding: 10px 16px;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav a.current {
  background-color: #2f4f4f;
}  
 <nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

Ответ №3:

Это происходит потому, что вы предоставляете границу только первому дочернему элементу.
Посмотрите ниже.

 #mainnav li:first-child a {
  border-left: 1px solid black;
}

Замените этот блок на следующий:
#mainnav li a { border-left: 1px solid black; }