將選單（導航區域）移動到csshtml的左側

所以我按照 Youtube 上的教程制作了一個網站，但是當我想將導航區域向左移動，將徽標向右移動時。但是現在我無法點擊導航區域（它不會轉到寫入的網址）

* {
  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 浮動更改為右側。但是當我更改它時，id 不想轉到寫入的 url

uj5u.com熱心網友回復：

這是我改變的：

1. 洗掉float: rightfor 導航
2. display: flex為包裝器添加
3. 將徽標放在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>

標籤：html css css浮动

上一篇：根據它們擁有的類，有角度地顯示/隱藏DOM元素

下一篇：通過拉伸使背景影像覆寫div，而不是保持縱橫比