文本修饰不适用于浮动元素 [英] text-decoration not working on a floating element

问题描述

当使用具有文本装饰样式的div时，在浮动该范围之后，似乎没有将其应用于div内的范围。
对此有什么解释，我该如何解决？

When using a div with the text-decoration style it does not seem to apply it on a span inside the div after floating that span. What is the explanation for this and how can I fix it?

在这里查看我的问题： http://jsfiddle.net/wtBDX/2/

See my problem here: http://jsfiddle.net/wtBDX/2/

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
}

推荐答案

，其中状态：

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别后代的内容，例如内联块和内联表。

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

唯一的解决方法是将文字修饰也应用于 span ：

The only fix is to apply the text decoration to the span as well:

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
  text-decoration: line-through;
}

这篇关于文本修饰不适用于浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！