Блог

Главная - Вопросы по программированию - Используя CSS, как можно выровнять меньший текст справа на той же базовой линии?

Используя CSS, как можно выровнять меньший текст справа на той же базовой линии?

#html #css

#HTML #css

Вопрос:

Какие изменения я должен внести в это:

 <span style='font-size:400%'>left</span>
<span>right</span>

( https://jsfiddle.net/5z3ec48r/60 / ) чтобы заставить ‘right’ выровняться по правому краю, но сохранить выравнивание вертикальной базовой линии с ‘left’?

т.е.

введите описание изображения здесь

Это:

 <span style='font-size:400%'>left</span>
<span style='float:right'>right</span>

( https://jsfiddle.net/xx5ob2m1 /) не нужно применять:

введите описание изображения здесь

Ответ №1:

Поместите его в общий контейнер, например, a div , которому вы задаете эти настройки, используя flexbox (ширина может быть любой):

 .x {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 300px;
}

Вот скрипка: https://jsfiddle.net/ht4zb79s/1 /

Комментарии:

1. PS Я считаю, что это работает с заменой div на span, и поскольку span кажется более подходящим, учитывая небольшой контент, я буду использовать span.

Ответ №2:

Удалите значение с плавающей точкой и попробуйте выполнить следующее:

 span {
  display: inline-block;    
  vertical-align: baseline;
  width: 48%; /* or whatever */
}

span   span {
  text-align: right;
}

Комментарии:

1. Я бы не хотел устанавливать ширину, поскольку она может не соответствовать содержимому в целом.

2. На самом деле вам не нужна ширина, это было только для примера