css 为什么不公正-内容：间隔;工作？

wbgh16ku 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(89)

项目只是停留在左边，而不是分散。而且，我使用谷歌图标，图标不会显示，除非我使用的基础标签在头部部分（域名没有注册）;这正常吗？我的浏览器是Microsoft Edge。

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<!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,GRAD@20..48,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>

css

来源：https://stackoverflow.com/questions/75633529/why-wont-justify-contentspace-between-work

3条答案

按热度按时间

wvyml7n51#

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>

赞(0）回复(0）举报 2023-03-05

htrmnn0y2#

看起来工作得很完美。"大脑档案"在左边，图标在右边。

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,GRAD@20..48,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>

赞(0）回复(0）举报 2023-03-05

o2rvlv0m3#

这是对@BrettDonald答案的一个小小的改动--图标也是均匀分布的。
这是通过设置它们的span父元素为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,GRAD@20..48,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>

赞(0）回复(0）举报 2023-03-05

我来回答

css 为什么不公正-内容：间隔;工作？

3条答案

相关问题

热门标签

最新问答