Вложенные теги span в CSS, где дочерний элемент должен быть ниже родительского

У меня сложная ситуация с CSS. В основном у меня есть вложенные теги span, которые выглядят так:

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

Мне нужно, чтобы «тест» был ниже «А» со всеми тремя буквами (А, В, С) одинаковой ширины.

Идеальный результат будет выглядеть так:

ABC
test

Теперь я получаю следующее:

A   BC
test

Это возможно? Я играл со свойством float, но это не сработало, потому что перед рассматриваемой буквой мог быть другой текст:

SOME OTHER TEXT. ABC
                 test

Я установил здесь скрипт (http://jsfiddle.net/grnbeagle/g3hG8/) и цель состоит в том, чтобы уменьшить ширину выделенного "A". Пока у меня position:relative и top/left регулировки.

Любое предложение приветствуется.


css stylesheet
person Grnbeagle    schedule 23.02.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

См. эту обновленную скрипту для рабочего примера:

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

Установка обертывания spans position: relative;, а затем дочернего элемента spans position: absolute; позволяет добиться желаемого эффекта.

person Nathan Anderson    schedule 23.02.2011
comment
Милая! Именно то, что мне было нужно. Спасибо! - person Grnbeagle; 23.02.2011

arrow_upward
1
arrow_downward

Я думаю, ты просто хочешь position: absolute;

Демонстрация →

Н.Б. чтобы буквы отображались плотно (как если бы разметка была <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>
person Matt Ball    schedule 23.02.2011
comment
Спасибо @MattBall. Натан был немного быстрее. - person Grnbeagle; 23.02.2011
comment
@Grnbeagle: ты прав, он был! Тоже почти такой же ответ. - person Matt Ball; 23.02.2011