html - 标签内的子标签错误换行

Question

有谁知道如果 a 标签内有子标签，为什么内容会像这样中断？ 看起来 CSS 单独威胁了子标签左侧的文本，我不知道如何解决这个问题。

片段:

a[href$='.pdf']:before {
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAgCAMAAADZqYNOAAABXFBMVEUAAADT09Tx8fLw8PHkBhPx+/vx8fLv8fLw8PHs7O3kAxDkBhPx+/vx8fLkBhPlERvU1NXx8fLPz9Dm5ufnQEjkBhPjAAa/v7/kBhPe3t7w7u/ttrrg4OHw8PHT09Tw8PHw8fLkBRLz9PXx/f3w9PXjAAXrjZPkAAvnN0HjAAHx+/zw8/Tx8vPoOUTnLjjp6ern5+jx+Pjw7u/rVl/lDhrtvcH3sLT0nqPxeYDqbXTx///x/v/u7O7r6+zv5ef3tbn1qa7rk5nyi5Dxf4bqf4btZm/rYGnrUFfnMj3nKDLmHyrx9vfv6Or4wcTspqr0pKnsoaXzmp/rmp/rhovpY2vpRE7lJi3nIirx/P3+7O3w6uvv4ePv3+Hu1tju0tX50NPtyMvux8rtx8rtwcTtubzsrLHsqq7yk5nripDqh43xhIrpdnzvdHvtaHDmS1TpQ0zlP0bmGCTkGCLkChVDmq1tAAAAH3RSTlMAnyifn/4e/tnZxm8n2dPPqaCfnoN8aGNEOSYmJRkZ6Sx0dAAAAXVJREFUKM990gVvg0AYgOFOmLt7jzFGsbZI3d1Wt7m7y/9P9rVdrqODvcGSB7jL5UytNgd6mp3fMOH6zT0h++jQfxoYwTwxjLSBmjGvEzuaeGT3IzQJvDg1NjYtWixwdE5RTCvIbrfZbKOrpkESYtQvllQZmlRVhmHojHnYBgXm2kon8mHlMRTOFl3RD3jXahYQJPR1NOZ+C5fFRNSpZMi2ovbMf9R95kq7LKk7Zzmpo7Fnli26QnVnk+5VqJklyUzKylhV8q8yLEvTLFzgBrENrCvj40sLkd3f3ZewtlrzUTgvPHNAXZ3oLr/skOE7jfZjJQqWG8JQqao7sm+oXEUpcIYqXX1eSIYqHL4HBUPlg41rr6FSlWji0ksRlKSjvD954Mx64tW4Y6dXEcc9WT3x24e0O5Q6z2lUloSS+HrCU5wvGPF4jnmN5k5rsfoR0R6Ag32p+bOwp+RfHIA4rdaSDk7WVYiX/RIGjQrbunV0q0+3meVvtml0M+kHi1IAAAAASUVORK5CYII=');
    font-family: "Font Awesome 5 Free";
    margin-left: 0px;
    margin-right: 4px;
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 32px;
    display: flex;
}

a[href$='.pdf'] {
    align-items: center;
    display: flex;
    color: #000;
    margin-bottom: 5px;
    line-height: initial;
}

.fusion-text {
  width: 216px;
}

<div class="fusion-text">
  <p><strong>Sandbox</strong></p>
  <p><a href="test.pdf" class="pdf" target="_blank">Lorem Impsum CO<sub>2</sub> Lorem Ipsum</a></p>
  <p><a href="test.pdf" class="pdf" target="_blank">This is a longer text that will break normally</a></p>
  <p><a href="test.pdf" class="pdf" target="_blank">Short sentence CO<sub>2</sub> works</a></p>
  <p><a href="test.pdf" class="pdf" target="_blank">Short sentence CO<sub>2</sub> works not if longer</a></p>
</div>

谢谢!

Answer 1

Flex 将每个子元素视为其布局中的一个新条目。这包括文本元素。

如果您希望所有文本放在一起，请将该部分包装在容器元素中。

div {
  display: flex;
}

div::before {
  display: block;
  content: "";
  height: 30px;
  width: 30px;
  background: orange;
}

<div><span>H<sub>2</sub>O is good</span></div>