加粗字體重量移動文本對齊

我將標籤排成三行並以常規文本顯示。我想使這些標籤加粗，但是當我在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

加粗字體重量移動文本對齊

回答

相關問題