CSS трюк - вложенные теги span, где дочерний элемент должен быть ниже родительского - PullRequest
Новая
       1

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

0 голосов
/ 23 февраля 2011

У меня сложная ситуация с 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.

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

Ответы [ 2 ]

1 голос
/ 23 февраля 2011

Я думаю, вы просто хотите position: absolute;

Демо →

NB, чтобы буквы отображались плотно (как если бы разметка была <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>
1 голос
/ 23 февраля 2011

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

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

Установка обтекания span s position: relative; и тогда ребенок span s position: absolute; достигает желаемого эффекта.

...