粗体字重移动文本对齐答案

【问题标题】：Bold font weight shifting text alignment粗体字重移动文本对齐
【发布时间】：2016-03-01 23:35:03
【问题描述】：

我将标签排成三行并以常规文本显示。我想让这些标签 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; 
}

提前致谢

【问题讨论】：

使用：text-align: right ;
@ArifBurhan 文本已设置为在该标签的不同属性中右对齐。所以，它没有帮助。因此。标签不加粗时对齐。
@callMeJava text-align 不适用于内联元素。它必须应用于包含需要对齐的元素的块级元素。
@teefars 您的建议无法在不同的视口中正确缩放。

标签： html css

【解决方案1】：

这是您遇到的问题：

每个标签框 (.bold-label) 都是其内容（文本）的宽度。这意味着当内容展开时（因为您将其设为粗体），框也会随之展开。这会破坏你的对齐方式。

要克服这个问题，您可以为每个标签框指定一个宽度。使用足够大的设置宽度，您可以在不更改框长度的情况下为文本扩展创建足够的空间。

试试这个：

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

DEMO

【讨论】：

这有点正确，但不应该将宽度设置为绝对大小。相对尺寸创建响应式设计。 min-width 和 max-width 可用于防止尺寸失控。但是，即便如此，真正的问题是标签中的文本应该是右对齐的。
您的解释很有道理，而且奏效了。非常感谢！
@ScottMarcus，我认为您对固定宽度的看法值得商榷，但我并不反对。您对右对齐是正确的。除了text-align 仅适用于块容器，因此display 的值也必须更改。谢谢。
我已经指出 text-align 仅适用于块级元素。我只是没有在上面的评论中重复这一点。至于固定宽度，欢迎您发表意见，但使用响应式设计构建移动优先并不是我的观点，它确实是当前 Web 开发的最佳实践。
@ScottMarcus，我没有注意到你在 cmets 中发帖。你的答案不清楚，但你确实提到了使用div。错过了。 +1

【解决方案2】：

做到这一点的唯一方法是在容器元素（如div）中设置需要右对齐（在姓氏上方）的标签，并将text-align: right 应用于该容器。

【讨论】：

【解决方案3】：

这是我的代码，但它把要点放在左边。希望对您有所帮助：

<!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>

【讨论】：