CSS技巧 - 嵌套的跨度标签，其中的孩子需要低于父

我有一个棘手的CSS情况在这里。基本上我有嵌套span标签看起来像这样：CSS技巧 - 嵌套的跨度标签，其中的孩子需要低于父

<span>A 
    <span>test</span> 
</span> 
<span>B</span> 
<span>C</span>

我需要“测试”是下面的“A”与所有三个字母（A，B，C）等于宽度。

理想的结果是这样的：

ABC 
test

什么，现在我得到的是：

A BC 
test

这可能吗？我打了float属性，但它没有工作，因为可能有问题的信之前其他文本：

SOME OTHER TEXT. ABC 
       test

我在这里（http://jsfiddle.net/grnbeagle/g3hG8/）成立了一个小提琴，目标是减少的宽度突出显示“A”。到目前为止，我有position:relative和top/left调整。

任何建议表示赞赏。

来源

2011-02-23 Grnbeagle

的工作示例，请参见该更新的提琴：

http://jsfiddle.net/g3hG8/4/

设置包装span小号position: relative;然后孩子span小号position: absolute;达到你想要的效果。

来源

2011-02-23 02:31:32

甜！正是我需要的。谢谢！ – Grnbeagle 2011-02-23 02:38:51

我觉得你只是想position: absolute;

Demo →

注：为了让字母紧密显示（就好像标记是<span>ABC</span>），您需要从标签之间删除全部空白区域，就像我的小提琴那样。

<span>H</span><span>i</span><span> </span> 
<span style="background:yellow; position: relative;">A<span style="font-size:0.8em; font-weight:bold; position:absolute; top:10px; left: 0;">test</span> 
</span><span>B</span><span>C</span>

来源

2011-02-23 02:32:48

谢谢@MattBall。内森更快一点。 – Grnbeagle 2011-02-23 02:39:49

@Grnbeagle：你是对的，他是！几乎完全一样的答案，也是。 – 2011-02-23 02:50:32

CSS技巧 - 嵌套的跨度标签，其中的孩子需要低于父

回答

相关问题