邊框底部屬性給出h1標籤100％邊框寬度

Question

我已將此h1和我給它一個類，並將邊框底部應用到它，以便我可以給出一個很好的下劃線效果。 我可以使用text-decoration屬性，但給出大膽的下劃線效果使我可以具有下劃線寬度。 當我給h1下劃線時，邊框達到容器100％的全寬。 請告訴我如何解決它。 謝謝。

Answer 1

使用display: inline H1顯示邊界的原因是因爲它默認情況下是一個顯示塊。希望這可以幫助！

Answer 2

因爲h1是一個塊級元素，默認情況下該元素的寬度爲100％。所以讓它成爲一個內聯元素。

這裏是構建h1作爲內聯元素的CSS。

h1{border-bottom:1px solid red;display:inline-block;} 

這裏是HTML

<h1>My First Heading</h1> 

這裏是一個演示.. http://jsbin.com/voyuluyo/1/edit

Answer 3

正如RaySinlao說，display:block將使所有的方式展開。如果您想讓下一個元素轉到下一行，則display:inline將不起作用。使用display:table。表將收縮包裝（以適應內容）或展開（修復weird bugs）或clearfix。想想看，桌子有很多東西。

Answer 4

HTML

---

<h1 class="headings"> hi this is SO </h1> 

<h1 class="headings1"> hi this is SO </h1> 

CSS

---

.headings 
{ 
    border-bottom:10px solid black; 

} 

.headings1 
{ 
    display:inline-block; 
    border-bottom:10px solid red; 
} 

小提琴

---

Working Demo

輸出：

---