如何制作一个充满屏幕的导航栏？

Question

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

为了将该徽标放在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;
}