如何設置此CSS的行高？

-4

.mainheading 
{ 
    font-weight: 700; 
    font-style: normal; 
    position: relative; 
    padding-bottom: 1.33333rem; 
    display: table; 
    line-height: 1.1; 
} 

.mainheading::after 
{ 
    content:''; 
    display: block; 
    position: absolute; 
    border-bottom: 2px solid #72bf44; 
    min-width: 110px; 
    width: 70%; 
    bottom: 0; 
    left: 0.2rem; 
}

我工作的一個報告工具，我試圖將這個CSS到標籤如何設置此CSS的行高？

但行高不工作。推薦我哪裏出了錯

來源

2017-08-08 Madhu

其行之間的空間 – Madhu

如果您只使用一個數字作爲行高，則字體大小乘以該行高的數字。這似乎適用於發佈的代碼，所以除非在其他地方有更多*特定的*樣式，否則它正在工作 – adeneo

@Madhu調試CSS的最佳方法是打開瀏覽器的開發工具（通常爲F12）並檢查該元素;看看應用到它的CSS，看看你的風格是否被應用或不被覆蓋和/或覆蓋。您也可以在這裏（本地）手動編輯CSS以預覽更改。 – Wrinn

與您最初的代碼，你基本上是創建一個新的HTML標籤<Label>與屬性Class。 CSS可以通過選擇器.和#來讀取class和id。您可以隨時選擇與CSS attribute selector的屬性，你的情況：

label[Class="mainheading"] { 
    /* style */ 
}

我建議你堅持使用class和id代替Class和ID，像這樣：

<label caption="Main Report" class="mainheading" id="lblDashboardsummary">Hello</label>

並在CSS文件只是做

label.mainheading

來源

2017-08-08 17:36:28 Ivan

錯誤，html不區分大小寫：https://www.w3.org/TR/2012/WD-html-markup-20120315/documents.html#case-insensitivity – Wrinn

而且OP的代碼看起來很像一個模板或服務器端代碼，轉換爲HTML – adeneo

它是我編寫代碼時的錯誤。我正在使用報告工具，「班級」沒有任何問題 – Madhu

.mainheading 
 
{ 
 
    font-weight: 700; 
 
    font-style: normal; 
 
    position: relative; 
 
    padding-bottom: 1.33333rem; 
 
    display: table; 
 
    line-height: 0; 
 
} 
 

 
.mainheading::after 
 
{ 
 
    content:''; 
 
    display: block; 
 
    position: absolute; 
 
    border-bottom: 2px solid #72bf44; 
 
    min-width: 110px; 
 
    width: 70%; 
 
    bottom: 0; 
 
    left: 0.2rem; 
 
}

<label caption="Main Report" class="mainheading" 
 
    id="lblDashboardsummary">Your Text</label>

這是良好的編碼習慣寫HTML屬性小寫。

希望這會有所幫助。

來源

2017-08-08 17:36:45

錯誤，html不區分大小寫：https：//www.w3.org/TR/2012/WD-html-markup -20120315/documents.html＃不區分大小寫 – Wrinn

是的。這就是爲什麼我寫的必須是，不一定是。以小寫字母寫下是一個好習慣。 –

'必須'和'必須'對我來說是一樣的..請編輯它 – Ivan

如何設置此CSS的行高？

回答

相關問題