Блог

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

Название компании на том же уровне, что и панель навигации

#html #css #navigation #navbar

#HTML #css #навигация #панель навигации

Вопрос:

Я не могу отформатировать название ресторана «al dente» на панели навигации. Я пытаюсь использовать один и тот же формат для всего. Пожалуйста, обратите внимание, что я начал кодировать вчера..

 * {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  }
#navbar {
  background-color: black;
  color: white;
  list-style-type: none;
  margin: 0px;
  padding-right: 20px;
  overflow: hidden;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  }
.navbarlist {
  display: inline-block;
  float: right;
  margin: 10px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 14px 16px;
  } 
 <div id="navbar">Al Dente
<nav>
    <ul >
        <li class="navbarlist"><a href="#">Home</a></li>
        <li class="navbarlist"><a href="menu.html">Menu</a></li>
        <li class="navbarlist"><a href="reservations.html">Reservations</a></li>
        <li class="navbarlist"><a href="contact.html">Contact</a></li>
        <li class="navbarlist"><a href="gallery.html">Gallery</a></li>
    </ul>
</nav>  
</div>

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

1. Это легко сделать. Оберните «Al Dente» внутри a <span>и примените float:слева на промежутке.

Ответ №1:

Прежде всего — поздравляю с началом работы над кодом. Хитрость, чтобы поместить все в одну строку, состоит в том, чтобы использовать flex (есть и другие способы сделать это, но это текущая лучшая практика, и вы должны начать с лучшего из моих.

Первое, что нужно знать о flex — это то, что когда вы применяете стиль «dsiaply: flex» — это влияет только на прямые дочерние элементы элемента — так что нам нужно сделать, это обернуть вас «al dente» в элемент — и в данном случае это обычно h1 — поскольку этоназвание заголовка страницы / самого высокого порядка.

Итак — то, что я изменил / добавил

  • оберните имя символом h1 и придайте h1 некоторый стиль
  • изменил панель навигации #, чтобы она имела одинаковое заполнение слева и справа
  • добавлено display: flex в #navbar, чтобы разрешить встроенную / гибкую компоновку, которая будет влиять только на h1 и navlist
  • добавлено align-items: center , чтобы убедиться, что заголовок и список навигации расположены вертикально на панели навигации
  • добавлено justify-content: space-between , чтобы убедиться, что заголовок и список навигации находятся по обе стороны от панели навигации.
  • удалено значение с плавающей точкой в списке навигации

Я бы рекомендовал изменить цвет ссылок — синий на черном не очень хорош для контраста (его слышно при чтении).

потратьте некоторое время на изучение тонкостей стилизации flexbox — это абсолютно поможет вам в разработке перспективного кода и стиля.

Добро пожаловать в мир программирования 🙂

 * {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  }
  
h1 {
  font-size: 20px;
}
#navbar {
  background-color: black;
  color: white;
  list-style-type: none;
  margin: 0px;
  padding: 0 8px;
  overflow: hidden;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  
  
.navbarlist {
  display: inline-block;
  margin: 10px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 14px 16px;
  } 
 <div id="navbar">
 <h1>Al Dente</h1>
 <nav>
    <ul >
        <li class="navbarlist"><a href="#">Home</a></li>
        <li class="navbarlist"><a href="menu.html">Menu</a></li>
        <li class="navbarlist"><a href="reservations.html">Reservations</a></li>
        <li class="navbarlist"><a href="contact.html">Contact</a></li>
        <li class="navbarlist"><a href="gallery.html">Gallery</a></li>
    </ul>
  </nav>  
</div>