物品只是留在左边而不是散开。另外，我使用的是 Google Icons，除非我在 head 部分使用 base 标签（域名未注册），否则图标不会显示；这是正常的吗？我的浏览器是 Microsoft Edge。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brain Archive</title>
<meta charset="UTF-8">
<base href="https://www.brainarchive.com/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="brain_archive.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<header>
<span>Brain Archive</span>
<span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>
</span>
</header>
<main>
</main>
</body>
</html>
header{
display:flex;
justify-content:space-between;
width:100%;
}
似乎工作完美。左边是“大脑档案”，右边是图标
header {
display: flex;
justify-content: space-between;
width: 100%;
} <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<header>
<span>Brain Archive</span>
<span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>
</span>
</header>Make the Parent Span tag us, Div Tag.
<header>
<div>Brain Archive</div>
<div>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>
</div>
</header>
这是对@BrettDonald 回答的轻微改动 - 图标也均匀分布。
这是通过将它们的 span parent 设置为 display:contents 来实现的，这告诉 flex 包含该元素的子元素。
header {
display: flex;
justify-content: space-between;
width: 100%;
}
header span:last-child {
display: contents;
}<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<header>
<span>Brain Archive</span>
<span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>
</span>
</header>