CSS trick— nested span tags where the child needs to below the parent

问题

I have a tricky CSS situation here. Basically I have nested span tags that looks like this:

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

I need "test" to be below "A" with all three letters (A, B, C) being equal width.

The ideal result would look like this:

ABC
test

What I'm getting now is this:

A   BC
test

Is this possible? I played with float property, but it didn't work because there could be other text before the letter in question:

SOME OTHER TEXT. ABC
                 test

I set up a fiddle here (http://jsfiddle.net/grnbeagle/g3hG8/), and the goal is to reduce the width of highlighted "A". So far I have position:relative and top/left adjustment.

Any suggestion is appreciated.

回答1:

See this updated fiddle for a working example:

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

Setting the wrapping spans position: relative; and then the child spans position: absolute; achieves the effect you desire.

回答2:

I think you just want position: absolute;

Demo →

N.B. in order to get the letters to display tightly (as if the markup was <span>ABC</span>) you need to remove all white space from between the tags, as my fiddle does.

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

来源：https://stackoverflow.com/questions/5086372/css-trick-nested-span-tags-where-the-child-needs-to-below-the-parent