与导航栏同级的公司名称答案

【问题标题】：Name of the company on the same level as navigation bar与导航栏同级的公司名称
【发布时间】：2021-01-14 00:16:18
【问题描述】：

我无法在导航栏中格式化餐厅名称“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>

【问题讨论】：

这样做很容易。将“Al Dente”包裹在中并在跨度上应用 float:left。

标签： html css navigation navbar

【解决方案1】：

首先 - 恭喜您开始编写代码。将所有内容放在同一条线上的诀窍是使用 flex（还有其他方法可以做到这一点 - 但这是当前的最佳实践 - 你应该从我最好的开始。

首先要了解 flex——当你应用“dsiaply:flex 样式”时——它只会影响元素的直接子元素——所以我们要做的就是将你“al dente”包裹在一个元素中——在这种情况下通常是 h1 - 因为它是页面的名称/最高顺序标题。

所以 - 我改变/添加的东西

用 h1 包装名称并给 h1 一些样式
修改了#navbar，使其左右填充相等
将display: flex 添加到#navbar 以允许内联/弹性布局，这将只影响h1 和导航列表
添加了align-items: center 以确保标题和导航列表垂直对齐到导航栏
添加了justify-content: space-between 以确保标题和导航列表位于导航栏的两侧。
移除了 navlist li 上的浮动

我建议更改链接的颜色 - 黑底蓝不是很好的对比度（可以听到阅读）。

花一些时间学习 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>

【讨论】：