Question

我这里有一个棘手的CSS情况。基本上我有嵌套的span标签，如下所示：

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

我需要“test”低于“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调整。

任何建议表示赞赏。

Answer 1

有关工作示例，请参阅此更新的小提琴：

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

设置包裹span s position: relative;然后让孩子span position: absolute;达到您想要的效果。

Answer 2

我想你只想要position: absolute;

Demo →

N.B。为了让字母紧密显示（好像标记是<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>

CSS技巧 - 嵌套的span标记，其中子项需要在父项下面

2 个答案: