Make元素出现在上一个文本之前/之后?

时间:2013-11-01 21:39:26

标签: css twitter-bootstrap

鉴于此:

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

是否有任何可以应用于<small>的CSS,它会出现在BEFORE之前,在上一行之前,在“这是......”之前? float:left; display:block;在内容之前没有得到它。

2 个答案:

答案 0 :(得分:1)

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

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

请注意,在设置填充时,em表示h1元素的字体大小,而在声明内部元素的高度时,small元素,{{1} }表示字体大小,它更小。因此,em1em相对应,即使填充意图为1.3em元素提供空间。您可能希望在smallh1(例如small)上设置字体大小以获得更可预测的呈现效果,然后尝试使用h1 { font-size: 150% } small { font-size: 80% }padding获得你喜欢的外观的价值观。此调整还取决于字体。

答案 1 :(得分:0)

这是:

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;
}

之前的伪元素将使之前的东西。而\A将使空间中断。

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