**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。
这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
2天前关闭。
Improve this question
我尝试将两个框并排对齐。我在HTML中创建了一个父框（header），然后创建了两个子框（“header-left”和“header-right”）。我设置了“display：flex”在CSS中的“header”上，但是两个孩子不对齐，我不明白为什么。我不明白为什么通过设置display：flex的标题，它不只是水平对齐的两个孩子，他们留一个在另一个。
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Saira+Condensed:wght@500&display=swap");
* {
background-color: rgb(29, 29, 29);
color: rgb(250, 250, 250);
font-family: "Inter", sans-serif;
margin: 0;
padding: 5px;
}
p {
font-size: 0.8rem;
}
body {
box-sizing: border-box;
min-height: 100vh;
}
li {
list-style: none;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
nav ul {
display: flex;
width: 50%;
justify-content: space-between;
}
.header {
display: flex;
}<!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>Hélium</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<h2>Helium</h2>
<ul>
<li>5G</li>
<li>Explorer</li>
<li>Ecosystem</li>
</ul>
</nav>
<header>
<div class="header-left">
<div class="header-left-container">
<h1>People-Powered Networks</h1>
<h3>Start a Wireless Revolution</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse nam sequi incidunt hic ipsum perferendis sint ratione, illo velit aspernatur!
</p>
</div>
</div>
<div class="header-right">
<img src="/Users/jeandizian/Documents/Code/TP/Helium/img/main.png" alt="Rooter image" height="90px
" />
</div>
</header>
<div class="info">
<div class="info-left">
<h3>Core technologies</h3>
<btn-container>
<button>Tokkens</button>
<button>Proof of Coverage</button>
<button>LongFi</button>
</btn-container>
</div>
<div class="info-right">
<h3>Our Investors</h3>
<img-container>
<img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo2blue.png" alt="GV Logo" />
<img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo3blue.png" alt="Firstmark logo" />
<img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo4blue.png" alt="Khosla Ventures logo" /></img-container>
</div>
</div>
</body>
</html>
1条答案
按热度按时间ef1yzkbh1#
您正在CSS中使用class selector，由
.表示要么给予
header一个名为.header的类，要么用途：x一个一个一个一个x一个一个二个x