html - 如何让这个 div 换行

Question

如何将 ARC 放到自己的线路上？我将它们放在同一个 div 中以共享背景，但我无法将两者分开。在我输入“ARC”之前，我的菜单栏完全居中。

.header{
  background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 80vh;
  display: flex;
  width: 100%;
}


.header ul li{
float: left;
color: white;
list-style: none;
padding: 7px 6px;
margin: 0;
text-align: center;
font-size: 15px;
display: flex;
}

.menu{
  width: 100%;
  text-align: center;
  display: block;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

    <div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
      <br>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

Answer 1

我会更改 HTML来自:

 <div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
      <br>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

对此(解决方案):

 <div class="header">
    <div id="navbar-wrapper">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
    </div>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

结论:最好使用例如 div 标签来换行而不是 br 标签，因为您可以更好地控制页面设置并且更容易设置样式。继续努力!