相关疑难解决方法(0)

最近我回答了一个问题,并且OP希望text-decoration: underline;将整个文本包裹在a元素内部,而不是包裹在内部的文本span,所以它是这样的

<a href="#"><span>Not Underline</span>Should Be Underlined</a>

所以简单地给予

span {
   text-decoration: none;
}

不会删除span元素内包含的文本的下划线

但这确实删除了下划线

span {
   text-decoration: none;
   display: inline-block;
}

所以我做了span一个inline-block,它工作,这是我通常做的.但是当谈到解释时,我无法解释为什么这样做实际上删除了简单使用的下划线text-decoration: none;.

演示

Flex容器的所有子容器(由display: flex或指定display: inline-flex)自动生成弹性项目.Flex项目没有显示属性; 相反,我们将其设置为其他值,具体取决于我们希望如何布置Flex项目的子项.

所以,如果我display在Y元素上设置X值(考虑到Y参与flex上下文,即Y是一个flex项),我可以确定我将始终获得行为的flex项(在这个格式化上下文,在flex容器中)就像一个块级元素？

(换句话说,无论X = block/inline/table-cell/inline-grid/...等,Y都参与块格式化上下文,对吧？)

• X - 非块值
• Y - flex-item,html元素

这个:

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: inline;">item</div>
</div>

等于此(没有任何副作用)

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: block;">item</div>
</div>