Исправление неработающего оформления <a> с несколькими промежутками.

StackOverflow https://stackoverflow.com/questions/1586742

  •  22-09-2019
  •  | 
  •  

Вопрос

Так что я

<a href="#">R<span class="superscript">5</span></a>

и подчеркивание для моего якоря сломано (это означает, что подчеркивание для R находится на базовой линии, а подчеркивание для 5 находится в середине R - потому что 5 маленькая), чего я не хочу.Как сделать так, чтобы подчеркивание привязки было одной непрерывной линией под буквой R и цифрой 5 (в базовой линии)?

Спасибо.

Это было полезно?

Решение

Я не уверен, сработает ли это или есть ли более приятные решения, но вы можете убрать подчеркивание и добавить bottom-border к a элемент.

Другие советы

Вам следует использовать <sup> ярлык.Это отлично работает для меня:

<a href="#">R<sup>5</sup></a>

с

a { text-decoration: underline; }

Я не знаю, как вы реализуете надстрочный индекс, но я упомяну распространенную причину, по которой люди этого не делают.Они думают, что это устарело, как <b> (это не так) или что это не семантически (это так).

ах, не знал о <sup> вообще-то :*) я использовал .superscript { font-size:xx-small; vertical-align:top; }

Если вы хотели использовать CSS для верхнего индекса, вам понадобится это:

.superscript {vertical-align:super;}

Но, как указывает клетус, просто используйте семантически правильное и все еще модное использование <sup> ярлык.

На самом деле было бы полезно знать, какой CSS применяется к обоим из них, но вы можете поиграть с line-height свойство и явно определить непротиворечивое vertical-align ценность для обоих из них, если нет, вы можете попробовать bottom-border вместо text-decoration:underline.

a span.superscript { vertical-align:baseline; line-height:1; }

Редактировать:Я этого не испытываю @ http://jsbin.com/orudi

  <a href="#">R<sup>5</sup></a>

  <style>
      body { width:5em; margin:0 auto; font-size:100%; padding:5em 0 0; background:#000; }
      a { text-decoration:underline; color:#fff; font-size:5em; }
      a sup { vertical-align:top; font-size:xx-small; font-size:.5em; }
  </style>

Вы можете попробовать этот CSS, который я нашел, он не позволяет нижнему и верхнему индексу нарушать высоту строк.Меня устраивает.

sup, sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.75em; font-weight: normal; }
sub { top: 0.4em; }

Попробуйте следующие химические формулы:

MgNaA<sub>l5(</sub>Si<sub>4</sub>O<sub>10</sub>)<sub>3</sub>(OH)<sub>6</sub>

или

Radioactive Phosphorus-32 is <sup>32</sup>PO<sub>4</sub><sup>3-</sup>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top