Question

我将标签对齐成三行并以常规文本显示。我想将这些标签设为粗体，但是当我在CSS中应用该属性时，对齐会变得有些混乱。

我已经包含了一些填充和边距属性，以便在文本框和标签之间留出更多空间，但这似乎没有帮助。

我正在尝试将文字粗体化为＆＃34; *＆＃34;并使它与＆＃34; Surname＆＃34;标签

如何使标签变粗并保持对齐？我只能更改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; 
}

提前致谢

Answer 1

执行此操作的唯一方法是使标签需要在容器元素中右对齐（在Surname上方），例如div并将text-align: right应用于该容器。

Answer 2

以下是您遇到的问题：

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

要解决此问题，您可以为每个标签框指定宽度。使用足够大的设置宽度，您可以创建足够的空间来扩展文本，而无需更改框的长度。

试试这个：

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

DEMO

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

粗体字体重量移动文本对齐

3 个答案: