在CSS html中将菜单(导航区)移动到左侧

所以我按照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，我知道我应该把导航区浮动到左边，logo浮动到右边。但当我改变它时，id不想转到写入url

我的改动如下:

删除导航

float: right

为包装器添加display: flex
将logo放在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>

相关内容

最新更新

热门标签：