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

Question

鉴于这种：

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

有没有我可以应用的 CSS<small>让它出现在“这是......”之前和上一条线上？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表示其字体大小，较小。因此1emvs. 1.3em，即使填充是为了给small元素留出空间。您可能希望在h1and small（例如h1 { font-size: 150% } small { font-size: 80% }）上设置字体大小以获得更可预测的渲染，然后尝试使用paddingandheight值来获得您喜欢的外观。这种调整也将取决于字体。

Answer 2

这里是：

HTML：

<h1 id="thisid">This is a test <small>It is</small></h1>

CSS：

#thisid:before {
content:"This is the content on the line above \A  ";
white-space: pre;
}

:before 伪元素将使内容在前面。而这\A将使空间中断。

这是小提琴：http: //jsfiddle.net/pikk/ZL54q/