Блог

Главная - Вопросы по программированию - Как сделать навигационную панель, которая занимает весь верхний экран?

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

#html

Вопрос:

Я пытаюсь создать веб-сайт, и я хочу, чтобы навигационная панель занимала весь экран, вот так: [1]: https://i.stack.imgur.com/X6zyc.png Я ввел следующий код:

 /* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  padding: 5px 10px;
  color: black;
}

/* Style the links inside the navigation bar */
.topnav a {
  font-family: 'Roboto', sans-serif;
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: white;
}

/* Change the color of links on hover */
.topnav a:hover {
  color: #ff726f;
}

/* Add a color to the active/current link */
.topnav a.active {
  color: white;
} 
 <div class="topnav">
  <a class="#" href="#">yes</a>
  <a href="#" href="index.html">Home</a>
  <a href="#">Commands</a>
    <a href="#">Community Server</a>
</div>

я много искал этого, но все еще не мог найти четкого ответа. кто-нибудь, пожалуйста, может мне помочь?

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

1. прежде чем вы повысите или понизите голос, у меня есть bg серого тела, и я покажу вам этот bc, когда вы запустите мой фрагмент в переполнении, он не показывает его хорошо i.imgur.com/JjAFnu5.png

2. по умолчанию элемент уровня блока будет занимать всю ширину. Ваша проблема, скорее всего, вызвана полем по умолчанию для тел.

Ответ №1:

Ваша nav область охватывает всю область, которую вы можете видеть в приведенном ниже фрагменте в качестве red фона .

Если вы хотите nav , чтобы ссылки охватывали оба конца, вы можете использовать display: flex; свойство с justify-content:space-between; 

 /* Add a black background color to the top navigation */

.topnav {
  display: flex;
  justify-content:space-between;
  overflow: hidden;
  padding: 5px 10px;
  color: black;
  background-color: red;
}


/* Style the links inside the navigation bar */

.topnav a {
  font-family: 'Roboto', sans-serif;
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: white;
}


/* Change the color of links on hover */

.topnav a:hover {
  color: #ff726f;
}


/* Add a color to the active/current link */

.topnav a.active {
  color: white;
} 
 <div class="topnav">
  <a class="#" href="#">yes</a>
  <a href="#" href="index.html">Home</a>
  <a href="#">Commands</a>
  <a href="#">Community Server</a>
</div>
Метки: ,