css - 超链接破坏了 flexbox 布局

Question

我使用包含两个 svg 图标的 flexbox制作了这个标题。然后，我尝试将 svg 包装在链接标签中，这会导致图标对齐混乱并增加标题的高度。我无法弄清楚为什么会这样。这是我添加链接标签后的样子。

这是我在标签中包装 svg 元素之前的标头<a>代码：

<header>
      <svg id="apple" xmlns="http://www.w3.org/2000/svg" width="16" height="44" viewBox="0 0 16 44"><path d="M8.02 16.23c-.73 0-1.86-.83-3.05-.8-1.57.02-3.01.91-3.82 2.32-1.63 2.83-.42 7.01 1.17 9.31.78 1.12 1.7 2.38 2.92 2.34 1.17-.05 1.61-.76 3.03-.76 1.41 0 1.81.76 3.05.73 1.26-.02 2.06-1.14 2.83-2.27.89-1.3 1.26-2.56 1.28-2.63-.03-.01-2.45-.94-2.48-3.74-.02-2.34 1.91-3.46 2-3.51-1.1-1.61-2.79-1.79-3.38-1.83-1.54-.12-2.83.84-3.55.84zm2.6-2.36c.65-.78 1.08-1.87.96-2.95-.93.04-2.05.62-2.72 1.4-.6.69-1.12 1.8-.98 2.86 1.03.08 2.09-.53 2.74-1.31"></path></svg>
      <svg id="question" viewBox="0 0 99.6097412109375 99.6572265625" version="1.1" xmlns="http://www.w3.org/2000/svg" classname=" glyph-box"><g transform="matrix(1 0 0 1 -8.740283203125045 85.05859375)"><path d="M 58.5449 14.5508 C 85.791 14.5508 108.35 -8.00781 108.35 -35.2539 C 108.35 -62.4512 85.7422 -85.0586 58.4961 -85.0586 C 31.2988 -85.0586 8.74023 -62.4512 8.74023 -35.2539 C 8.74023 -8.00781 31.3477 14.5508 58.5449 14.5508 Z M 58.5449 6.25 C 35.498 6.25 17.0898 -12.207 17.0898 -35.2539 C 17.0898 -58.252 35.4492 -76.7578 58.4961 -76.7578 C 81.543 -76.7578 100 -58.252 100.049 -35.2539 C 100.098 -12.207 81.5918 6.25 58.5449 6.25 Z M 57.5195 -25.1465 C 60.0098 -25.1465 61.4746 -26.6602 61.4746 -28.6133 L 61.4746 -29.1992 C 61.4746 -31.9336 63.0859 -33.6426 66.4551 -35.8887 C 71.1914 -39.0137 74.5605 -41.8945 74.5605 -47.7051 C 74.5605 -55.8594 67.334 -60.2051 59.082 -60.2051 C 50.6836 -60.2051 45.166 -56.25 43.7988 -51.7578 C 43.5547 -50.9277 43.4082 -50.1465 43.4082 -49.3164 C 43.4082 -47.168 45.1172 -45.9473 46.7285 -45.9473 C 49.5117 -45.9473 49.9512 -47.4609 51.5137 -49.2676 C 53.125 -51.9531 55.4688 -53.5645 58.7402 -53.5645 C 63.1836 -53.5645 66.1133 -51.0742 66.1133 -47.3145 C 66.1133 -43.9941 64.0137 -42.3828 59.7656 -39.4531 C 56.25 -37.0117 53.6621 -34.4238 53.6621 -29.6387 L 53.6621 -29.0039 C 53.6621 -26.416 55.0293 -25.1465 57.5195 -25.1465 Z M 57.4219 -10.5469 C 60.2539 -10.5469 62.6953 -12.793 62.6953 -15.625 C 62.6953 -18.5059 60.3027 -20.7031 57.4219 -20.7031 C 54.541 -20.7031 52.1484 -18.457 52.1484 -15.625 C 52.1484 -12.8418 54.5898 -10.5469 57.4219 -10.5469 Z"></path></g></svg>
</header>

* {
    box-sizing: border-box;
}

header {
    display: flex;
    justify-content: space-between;
    background-color: #323232;
}

#apple, #question {
    fill: #fff;
    width: 1rem;
}

#apple {
    margin-left: 1.1rem;
}

#question {
    margin-right: 1rem;
    width: 1.5rem;
}

标签： csshyperlinkflexboxanchor

Answer 1

您可以通过在 CSS 中添加边距并将其设置为 auto 来对齐它。检查以下输出，看看这是否是您想要的：

* {
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: #323232;
}

a {
  margin: auto 0px;
}

#apple,
#question {
  fill: #fff;
  width: 1rem;
}

#apple {
  margin-left: 1.1rem;
}

#question {
  margin-right: 1rem;
  width: 1.5rem;
}

<header>
  <a href='/'><svg id="apple" xmlns="http://www.w3.org/2000/svg" width="16" height="44" viewBox="0 0 16 44"><path d="M8.02 16.23c-.73 0-1.86-.83-3.05-.8-1.57.02-3.01.91-3.82 2.32-1.63 2.83-.42 7.01 1.17 9.31.78 1.12 1.7 2.38 2.92 2.34 1.17-.05 1.61-.76 3.03-.76 1.41 0 1.81.76 3.05.73 1.26-.02 2.06-1.14 2.83-2.27.89-1.3 1.26-2.56 1.28-2.63-.03-.01-2.45-.94-2.48-3.74-.02-2.34 1.91-3.46 2-3.51-1.1-1.61-2.79-1.79-3.38-1.83-1.54-.12-2.83.84-3.55.84zm2.6-2.36c.65-.78 1.08-1.87.96-2.95-.93.04-2.05.62-2.72 1.4-.6.69-1.12 1.8-.98 2.86 1.03.08 2.09-.53 2.74-1.31"></path></svg></a>
  <a href='/'><svg id="question" viewBox="0 0 99.6097412109375 99.6572265625" version="1.1" xmlns="http://www.w3.org/2000/svg" classname=" glyph-box"><g transform="matrix(1 0 0 1 -8.740283203125045 85.05859375)"><path d="M 58.5449 14.5508 C 85.791 14.5508 108.35 -8.00781 108.35 -35.2539 C 108.35 -62.4512 85.7422 -85.0586 58.4961 -85.0586 C 31.2988 -85.0586 8.74023 -62.4512 8.74023 -35.2539 C 8.74023 -8.00781 31.3477 14.5508 58.5449 14.5508 Z M 58.5449 6.25 C 35.498 6.25 17.0898 -12.207 17.0898 -35.2539 C 17.0898 -58.252 35.4492 -76.7578 58.4961 -76.7578 C 81.543 -76.7578 100 -58.252 100.049 -35.2539 C 100.098 -12.207 81.5918 6.25 58.5449 6.25 Z M 57.5195 -25.1465 C 60.0098 -25.1465 61.4746 -26.6602 61.4746 -28.6133 L 61.4746 -29.1992 C 61.4746 -31.9336 63.0859 -33.6426 66.4551 -35.8887 C 71.1914 -39.0137 74.5605 -41.8945 74.5605 -47.7051 C 74.5605 -55.8594 67.334 -60.2051 59.082 -60.2051 C 50.6836 -60.2051 45.166 -56.25 43.7988 -51.7578 C 43.5547 -50.9277 43.4082 -50.1465 43.4082 -49.3164 C 43.4082 -47.168 45.1172 -45.9473 46.7285 -45.9473 C 49.5117 -45.9473 49.9512 -47.4609 51.5137 -49.2676 C 53.125 -51.9531 55.4688 -53.5645 58.7402 -53.5645 C 63.1836 -53.5645 66.1133 -51.0742 66.1133 -47.3145 C 66.1133 -43.9941 64.0137 -42.3828 59.7656 -39.4531 C 56.25 -37.0117 53.6621 -34.4238 53.6621 -29.6387 L 53.6621 -29.0039 C 53.6621 -26.416 55.0293 -25.1465 57.5195 -25.1465 Z M 57.4219 -10.5469 C 60.2539 -10.5469 62.6953 -12.793 62.6953 -15.625 C 62.6953 -18.5059 60.3027 -20.7031 57.4219 -20.7031 C 54.541 -20.7031 52.1484 -18.457 52.1484 -15.625 C 52.1484 -12.8418 54.5898 -10.5469 57.4219 -10.5469 Z"></path></g></svg></a>
</header>