如何将这个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

由于你的li是浮动的，所以它们将是另一个。

添加clear：左边的元素，它将起作用。

.header ul li{
    float: left;
    clear: right;
    ...
 }

<强> clear

  

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在其下方向下移动（清除）。

     

clear属性适用于浮动和非浮动元素。

Answer 2

只是将一些CSS样式应用于链接并且有效。希望这有帮助！

.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;
  width: 100%;
}


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

.menu{
text-align: center;
  width: 100%;
  text-align: center;
  display: flex;
  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 3

我会更改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标签，因为您可以更好地控制页面设置，并且更容易设置样式。 保持良好的工作！