flexbox容器内的内容未显示内联链接

Question

我对flexbox还是很陌生，但似乎无法在这里找到答案。我有一个<p>标签，它已制成一个flex容器，并且在<p>内我想插入一个与文本内联的链接。

所需结果：

但是我得到的结果是这样的：

我可以获得预期结果的唯一方法是将<a>标记的display属性更改为“ contents”，但是快速浏览CanIUse show的是IE不支持它，我需要它为了这个任务。

我也不希望重组HTML，因为这将在WYSIWYG中进行呈现，而简单地将类添加到<p>标签中将是最佳方案。

我使用了scss版本制作了pen of the issue here，并且编译后的代码也发布在下面。任何帮助都会很棒。

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
}

.my-alert:before {
    font-family: 'Font Awesome 5 Free';
    font-size: 40px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    font-weight: 900 !important;
}

.my-alert-success {
    color: green;
    border-color: green;
}

.my-alert-success:before {
  content: '\f058'
}

<p class="my-alert my-alert-success">Quam diu etiam furor iste tuus nos eludet? Excepteur sint obcaecat cupiditat non proident culpa.<a href="/">Here is my link.</a> And here is more content.</p>

Answer 1

请不要在此处使用display:flex，因为它将容器中的所有元素都视为“块”。

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    /*display: flex; */
    padding-left:40px;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
    float:left;
    position: relative;
    &:before {
        font-family: 'Font Awesome 5 Free';
        font-size: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        font-weight: 900 !important;
      position:absolute; 
      left:8px; 
      top:50%;
      transform:translateY(-50%);
    }
}

.my-alert-success {
    color: green;
    border-color: green;
    &:before {
        content: '\f058';
    }
}