css - 使元素出现在上一个文本之前/之后？

Question

鉴于此:

<h1>This is a test <small>It is</small></h1>

有没有我可以应用到 <small> 的 CSS？那它会出现在“This is...”之前，并且在 PREVIOUS LINE 之前吗？ float:left; display:block;在内容之前没有得到它。

Answer 1

在这种相对简单的情况下，您可以使用定位。将标题声明为相对定位，在其上设置合适的顶部填充，并使 small 元素“绝对”定位(即，相对于其定位的祖先标题定位)。示例:

h1 { position: relative; padding-top: 1em; }
h1 small { position: absolute; top: 0; left: 0; height: 1.3em; }

请注意，在设置内边距时，em 表示h1 元素的字体大小，而在声明内部元素的高度时，small元素，em表示它的字体大小，比较小。因此 1em 与 1.3em 相比，即使填充是为了给 small 元素留出空间。您可能想在 h1 和 small 上设置字体大小(例如，h1 { font-size: 150% } small { font-size: 80% } ) 以获得更可预测的渲染，然后尝试使用 padding 和 height 值来获得您喜欢的外观。这种调整也将取决于字体。