Flexbox 问题：你能避免一个 link 被当作 flex li 的 child 吗？

Question

我在网站上有一个列表，由 CMS 填充。 li 项的 :before 是一个数字（counter-increment）非常大的字体大小，文本必须垂直对齐到这个数字。一切正常，除了客户端在“li”中添加了一个link。然后它被视为一个弹性元素并相应地显示...... 我知道一种解决方案是将所有“li”内容包含在“p”中，但这不是 CMS 输出的内容...

这是显示问题的代码笔： https://codepen.io/stebal/pen/RwVEByq

有没有办法告诉 link 不被视为 flexed li 的 child？

html:

<div class="list-wrapper">
<ol>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">My link</a></li>
    <li>Lorem ipsum dolor sit amet </li>
</ol>   
</div>

SCSS:

.list-wrapper {
        max-width:300px;
}
ol {
    counter-reset: ol-counter;
    li {
        counter-increment: ol-counter;
        list-style-type: none;
        position:relative;
        min-height:84px;
        padding-left: 40px;
        display:flex;
        align-items:center;
        &::before {
            position: absolute;
            content: counter(ol-counter);           
            left: -10px;
            font-family: Arial, sans-serif;
            font-size:84px;
            line-height:84px;
        }
    }
}

Answer 1

感谢 Fatima Mazhit a { 显示：内容； }

Flexbox 问题：你能避免一个 link 被当作 flex li 的 child 吗？

Flexbox question: can you avoid a link to be treated as child of flex li?

css

hyperlink

html-lists

flexbox