粗体字体重量移动文本对齐 [英] Bold font weight shifting text alignment

问题描述

我有三行对齐的标签，并以常规文字显示。我想把这些标签粗体，但是当我应用CSS中的属性，对齐方式有点搞砸了。

我已经包含了一些padding和margin属性，在文本框和标签之间有更多的空间，但是这似乎没有帮助。

我试图让文字加粗显示*，并与Surname标签对齐。

如何使标签粗体并仍保持对齐？我只能更改CSS文件，而不是HTML或文本的字体大小。

 之前
  

$ b b

 之后
  pre> 
 
 
  
  **之前的代码 -  ** 
 .bold-label {
} 
 
 .bold-label：after {
 color：＃e32; 
 content：'*'; 
 display：inline; 
} 
 
 **代码后 -  ** 
 .bold-label {
 font-weight：bold; 
 margin-left：-1em; 
 padding-right：0.75em; 
} 
 
 .bold-label：after {
 color：＃e32; 
 content：'*'; 
 display：inline;提前感谢

  
 
 $ b < h2_lin>解决方案

以下是您遇到的问题：

c> .bold-label ）是其内容（文本）的宽度。这意味着，当内容展开时（因为您粗体），该框将随之展开。这会中断对齐。

为了克服这个问题，您可以为每个标签框指定宽度。

请尝试以下操作：

  .bold-label {
 display：inline-block; 
 text-align：right; / *只适用于块容器* / 
 width：150px; 
} 
  

DEMO

I have labels aligned in three rows and displayed in regular text. I'd like to make these labels bold, but when I apply the property in CSS, the alignment gets a little messed up.

I have included some padding and margin properties to have more space between text box and label, but that doesn't seem to help.

I am trying to have the text bold with "*" and have it aligned with "Surname" label.

How can I make the labels bold and still keep the alignment? I can only make changes to the CSS file and not HTML or font size of the text.

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; 
}

Thanks in advance

解决方案

Here's the problem you're having:

Each label box (.bold-label) is the width of its content (the text). This means that when the content expands (because you make it bold), the box will expand with it. This breaks your alignment.

To overcome this you could assign a width to each label box. With a large enough set width you can create enough space for the text to expand without changing the length of the box.

Try this:

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

DEMO

这篇关于粗体字体重量移动文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！