Индекс и надстрочный индекс для одного и того же элемента

Есть ли способ добавить как индекс, так и верхний индекс к одному и тому же элементу? Если я делаю

Sample Text<sub>Sub</sub><sup>Sup</sup>

надстрочный индекс появляется после индекса. Одна моя идея, которую я сделал, - это сделать что-то вроде:

<table>
    <tr>
        <td rowspan='2' valign='center'>Sample Text</td>
        <td>Sup</td>
    </tr>
    <tr>
        <td>Sub</td>
    </tr>
</table>

Кажется, что он работает, но довольно уродлив. Любые лучшие идеи?

Спасибо!

Ответы

Ответ 1

Я не гуру CSS, но вы можете попробовать что-то вроде http://jsfiddle.net/TKxv8/1/

Есть много жестко заданных значений, и эффекты на другие элементы вокруг могут быть найдены только после этого, но это хорошее место для начала.

Sample Text 
<span class='supsub'>
    <sup class='superscript'>Sup</sup>
    <sub class='subscript'>Sub</sub>
</span>

.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

Ответ 2

Ну, вы можете указать положение sup относительно правой границы Sample Text.

http://jsfiddle.net/a754h/

Ответ 3

Этот подход аналогичен подходу CyberDudes, кроме того, он отбрасывает следующий текст в зависимости от ширины sub и sup:

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />

<style>
.supsub {
    display: inline-block;
}

.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: .5em;
    line-height: 1.2;
}

.supsub sub {
    top: .3em;
}
</style>

Ответ 4

Здесь чистое решение. Создайте два класса CSS:

.nobr {
   white-space: nowrap;
}
.supsub {
   display: inline-block;
   margin: -9em 0;
   vertical-align: -0.55em;
   line-height: 1.35em;
   font-size: 70%;
   text-align: left;
}

Возможно, у вас уже есть класс "nobr" как <nobr> замена. Теперь, чтобы выразить молекулярную формулу для сульфата, используйте класс "supsub" следующим образом:

<span class="nobr">SO<span class="supsub">2-<br />4</span></span>

То есть, добавьте ваш верхний индекс/индекс в класс "supsub" и поместите символ < br/ > между ними. Если вам нравятся ваши индексы/индексы немного больше или меньше, то отрегулируйте размер шрифта, а затем поместите его с вертикальным выравниванием и высотой строки. Значение -9em в настройке поля должно содержать добавление верхних индексов/индексов к высоте строки, содержащей их; любое большое значение будет делать.