与导航栏同级的公司名称

Question

我无法在导航栏中设置“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>

Answer 1

首先 - 恭喜您开始编写代码。使所有内容都在同一行的技巧是使用 flex（还有其他方法 - 但这是当前的 - 最佳实践，你应该从我最好的开始。

关于 flex 的第一件事是，当您应用“dsiaply:flex 样式时-它只会影响元素的直接 children - 所以我们需要做的是将您包裹起来”al dente”在一个元素中——在这种情况下通常是一个 h1——因为它是页面的 hte 名称/最高阶标题。

所以 - 我更改/添加的内容

用 h1 包装名称并给 h1 一些样式
修改了#navbar 使其左右填充相等
向 #navbar 添加 display: flex 以允许仅影响 h1 和 navlist 的内联/弹性布局
添加了 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>

与导航栏同级的公司名称

Name of the company on the same level as navigation bar

html

css

navigation

navbar