Блог

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

Ссылки на навигационную панель не изменяются в соответствии с цветом фона

#html #css #background-color #nav

#HTML #css #background-color #навигация

Вопрос:

Я в основном новичок в HTML / CSS, поэтому я не уверен, как описать мою проблему. Прошу прощения, если что-то неясно.

Панель навигации и цвет фона не синхронизированы

У меня есть веб-сайт с панелью навигации в верхней части страницы. Я хочу, чтобы поля между ссылками уменьшались при изменении размера окна. Однако, кажется, что меняется только цвет фона, когда я настраиваю его размер в Firefox. Это оставляет мне строку меню, которая исчезает из поля зрения, когда экран сжимается по горизонтали.

Я попытался удалить свойства margin и word-spacing, а также добавить свойство «display: flex», но, похоже, ничего не помогает. (Обычно мои правки ухудшают ситуацию.)

PS: Эта проблема возникла после попытки добавить тег ‘ul’ к ссылкам ‘nav’.

 nav {
  background-color: #3BD9D9;
  font-size: large;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  /*word-spacing: 1em;*/
  position: f;
  display: flex;
}

nav li {
  display: inline-block;
  border-width: 3px;
  border-style: outset;
  border-color: #0A46BF;
  border-radius: 30px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  list-style-type: none;
}  
 <nav>
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../services.html">Services</a></li>
    <li><a href="../shopping/shop.html">Shop</a></li>
    <!--    <ul>
            <li><a href="#monitors">Monitors</a></li>
            <li><a href="#cases">Cases</a></li>
        </ul><!-->
    <li><a href="../reviews.html">Reviews</a></li>
    <li><a href="../contact.html">Contact</a></li>
    <li><a href="../about.html">About/FAQ</a></li>
  </ul>
</nav>

Ответ №1:

используйте display: flex и justify-content: space-between 

 nav {
  background-color: #3BD9D9;
  font-size: large;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  /*word-spacing: 1em;*/
  position: f;
  display: flex;
}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}

nav li {
  display: inline-block;
  border-width: 3px;
  border-style: outset;
  border-color: #0A46BF;
  border-radius: 30px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  list-style-type: none;
}  
 <nav>
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../services.html">Services</a></li>
    <li><a href="../shopping/shop.html">Shop</a></li>
    <!--    <ul>
            <li><a href="#monitors">Monitors</a></li>
            <li><a href="#cases">Cases</a></li>
        </ul><!-->
    <li><a href="../reviews.html">Reviews</a></li>
    <li><a href="../contact.html">Contact</a></li>
    <li><a href="../about.html">About/FAQ</a></li>
  </ul>
</nav>

Комментарии:

1. Было ли ‘justify-content’ действительно всем, что мне было нужно? Что ж, похоже, это работает гораздо больше так, как я этого хотел. Спасибо, что избавили меня от очередного дня головной боли.

2. вы должны установить для отображения css значение flex для использования justify-content

3. developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Ответ №2:

Это происходит потому, что при изменении размера экрана теги ul стали больше, чем его контейнер.

Чтобы избежать этого, вы можете добавить свойство overflow в свою навигацию (например, overflow: scroll) (плохой выбор).

В любом случае лучший способ решить эту проблему — сделать ваш дизайн адаптивным, используя, например, загрузочную панель навигации:

https://getbootstrap.com/docs/4.5/components/navbar/

или медиа-запросы:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp