html - 我怎样才能做一个充满屏幕的导航栏？

Question

我是初学者。我想制作一个与此类似的栏，但我没有成功地使栏填满整个屏幕，而且我不知道如何使文本像图片中那样对齐。

为了将该 Logo 放在 div 的中间，我使用了这个 id。

#clogo {
    height: 50px;
    margin: auto;
    display: block;            
}

Answer 1

您可以使用display: flex 使元素居中，并使用width: 100% 使导航栏全宽，如下所示:

HTML:

<nav>
  <ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
  </ul>
</nav>

CSS:

nav {
  width: 100%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  height: 50px;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  font-size: 20px;
}