Saya mahu menjajarkan item yang berbeza dalam satu elemen! Saya cuba memberikan Element kotak fleksibel dan melaraskan item di dalamnya sendiri! Tetapi ia tidak bertindak balas dengan betul! Item senarai hendaklah berbaris dalam satu baris, dengan pautan kiri di sebelah kiri dan pautan kanan di sebelah kanan! Logo harus berada di tengah!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html>
.header {
font-family: monospace;
background: papayawhip;
display: flex;
align-items: center;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.header .left-links {
display: flex;
justify-content: flex-start; //I tried justify-items also, but it doesn't help!
flex-direction: row;
}
.header .logo {
display: flex;
justify-content: center;
}
.header .right-links {
display: flex;
justify-content: flex-end;
flex-direction: row;
}
//Saya juga mencuba justify-item tetapi tidak membantu!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa jika saya faham dengan betul,
ul是父级。将display: flexditugaskan kepadanya kerana ia adalah ibu bapa.Anda perlu menggunakan sifat Flex untuk
ulul { display: flex; flex-direction: row; flex-wrap: wrap; }Untuk meletakkan Item pada sisi skrin dan logo di tengah, cuma tetapkan pengepala kepada
justify-content: space- BetweenBerikut ialah senarai lengkap perubahan yang perlu anda buat
.header { display: flex; flex-direction: row; justify-content: space-between; } ul { display: flex; flex-direction: row; flex-wrap: wrap; }