将菜单（导航区域）移动到左侧 css html

Question

所以我按照 Youtube 上的教程制作了一个网站，但是当我想将导航区域向左移动，将徽标向右移动时。但是现在我不能点击导航区域（它不会去写 url）

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15pt;
}

.wrapper {
  width: 1170px;
  margin: auto;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/fikri-nyzar-AzQ0G1hJizk-unsplash.jpg);
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav-area {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px 0%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.nav-area li:hover {
  background: rgb(139, 139, 139);
  color: #333;
}

.logo img {
  width: 100px;
  float: left;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 600px;
  height: 300px;
  padding: 13% 10%;
  text-align: center;
}

.welcome-text h1 {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.welcome-text a {
  border: 1px solid #fff;
  padding: 10px 25px 0%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  color: #fff;
}

.welcome-text a:hover {
  background: #fff;
  color: #333;
}

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/rame.png');
  background-position: center top;
  height: 350px;
}

<header>
  <div class="wrapper">
    <div class="logo">
      <img src="https://via.placeholder.com/100.png" alt="">
    </div>
    <ul class="nav-area">
      <li><a href="3.daftar.html">Daftar</a></li>
      <li><a href="5. resep.html">Resep</a></li>
      <li><a href="4. credit.html">Credit</a></li>
    </ul>
  </div>

  <div class="welcome-text">
    <h1>Makanan Terenak Di Indonesia</h1>
  </div>
</header>

这是我制作的 css，我知道我应该将导航区域浮动到左侧，将徽标 img 浮动到右侧。但是当我更改它时，我不想去写 url

Answer 1

这是我更改的内容：

删除导航的 float: right
为包装器添加了display: flex
将徽标放在 span 标签内而不是它自己的 div

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15pt;
}

.wrapper {
  width: 1170px;
  margin: auto;
  display: flex;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/fikri-nyzar-AzQ0G1hJizk-unsplash.jpg);
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav-area {
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px 0%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.nav-area li:hover {
  background: rgb(139, 139, 139);
  color: #333;
}

.logo img {
  width: 100px;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 600px;
  height: 300px;
  padding: 13% 10%;
  text-align: center;
}

.welcome-text h1 {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.welcome-text a {
  border: 1px solid #fff;
  padding: 10px 25px 0%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  color: #fff;
}

.welcome-text a:hover {
  background: #fff;
  color: #333;
}

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/rame.png');
  background-position: center top;
  height: 350px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tugas Kelompok website</title>
  <link rel="stylesheet" href="menu.css">
</head>

<body>
  <header>
    <div class="wrapper">
      <ul class="nav-area">
        <li><a href="3.daftar.html">Daftar</a></li>
        <li><a href="5. resep.html">Resep</a></li>
        <li><a href="4. credit.html">Credit</a></li>
      </ul>
      <span class="logo">
                <img src="https://cdn.pixabay.com/photo/2018/03/28/04/02/logo-3268177_1280.png" alt="">
            </span>
    </div>

    <div class="welcome-text">
      <h1>Makanan Terenak Di Indonesia</h1>
    </div>
  </header>
</body>

</html>

将菜单（导航区域）移动到左侧 css html

moving the menu (nav-area) to the left side in css html

html

css

css-float