Смелое выравнивание текста с изменением веса шрифта

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

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

Я стараюсь, чтобы текст был выделен жирным шрифтом с символом «*» и привязал его к ярлыку «Фамилия».

Как сделать ярлыки яркими и сохранить выравнивание? Я могу только вносить изменения в CSS-файл, а не в HTML или размер шрифта текста.

Before

After

**Before code-** 
.bold-label { 
} 

.bold-label:after { 
color: #e32; 
content: ' *'; 
display:inline; 
} 

**After code-** 
.bold-label { 
font-weight: bold; 
margin-left: -1em; 
padding-right: 0.75em; 
} 

.bold-label:after { 
color: #e32; 
content: ' *'; 
display:inline; 
}

Заранее спасибо

источник

2016-03-01 callMeJava

Использование: ** выравнивания текста: правая; ** –

@ArifBurhan текст уже установлен для выравнивания права в другой собственности для этого ярлыка. Таким образом, это не помогло. Следовательно. он выравнивается, когда метки не выделены жирным шрифтом. – callMeJava

@callMeJava text-align не работает с встроенными элементами. Он должен применяться к элементу уровня блока, который содержит элементы, которые необходимо выровнять. –

Вот проблема, вы испытываете:

Каждая коробка этикетка (.bold-label) ширина его содержание (текст). Это означает, что когда содержимое расширяется (потому что вы делаете его жирным шрифтом), коробка будет расширяться вместе с ним. Это нарушает ваше выравнивание.

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

Попробуйте это:

.bold-label { 
    display: inline-block; 
    text-align: right; /* only works on block containers */ 
    width: 150px; 
}

DEMO

источник

2016-03-01 23:52:39

Это несколько правильно, но ширина не должна быть абсолютной. Относительные размеры создают отзывчивый дизайн. минимальная ширина и максимальная ширина могут использоваться для предотвращения размеров побега. Но, тем не менее, реальная проблема заключается в том, что текст в ярлыках должен быть выровнен по правому краю. –

Ваше объяснение имеет смысл, и это сработало. Спасибо огромное! – callMeJava

@ScottMarcus, ваши взгляды на фиксированную ширину Я думаю, спорный, но я не оспариваю их. Вы правы в правильном выравнивании. Кроме «text-align» применяется только к контейнерам блоков, поэтому значение «display» должно быть изменено. Благодарю. –

Единственный способ сделать это, чтобы иметь ярлыки, которые должны быть выровнены по правому краю (выше Фамилии) в контейнерном элементе, например, div и примените text-align: right к этому контейнеру.

источник

2016-03-01 23:40:24

Почему голос? Это правильный ответ. –

Это мой код, но он ставит маркированных точек на левой стороне. Надеюсь, что это помощь:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     li{ 
      font-weight:bold; 
      text-align:right;} 
</style> 
</head> 
<body> 

    <li>Consultation 
    </li> 

    <li>Pharmacist 
    </li> 

    <li>Registration No. 
    </li> 
</body>

источник

2016-03-01 23:57:48

Смелое выравнивание текста с изменением веса шрифта

ответ

Смежные вопросы