將自動寬度應用於H1標題

Question

我如何獲得H1標題，以便元素本身的寬度由使用的文本量定義？

在下面的示例中，我希望紅色背景為標題的寬度，但似乎無法使它發揮作用。

 body {width; 100%; margin: 0;} .holder { position: relative; } #events { margin: 1rem auto; background: red; text-align: center; width: auto; } 

 <div class="holder"> <h1 id="events">FUTURE THINGS</h1> </div> 

Answer 1

將display類型更改為行inline-block

 body {width; 100%; margin: 0;} .holder { position: relative; /* To center the text */ text-align:center; } #events { margin: 1rem auto; background: red; width: auto; display:inline-block; } 

 <div class="holder"> <h1 id="events">FUTURE THINGS</h1> </div> 

Answer 2

您可以使用display: inline-block實現此目的

#events {
    margin: 1rem auto;
    background: red;
    text-align: center;
    width: auto;
    display: inline-block; // Added
}

Answer 3

由於<h1>是塊級元素，因此它將占據容器的整個寬度。 如果將<h1> inline-block或inline元素，它將滿足您的要求。 但是我更喜歡在<h1>內添加<span> <h1>並為此應用背景色。 因此<h1>仍保留為塊元素，這對布局很有幫助。 由於默認情況下內聯元素中的<span> ，它將為您提供任何其他樣式。 您不再需要<h1>包裝器來維護布局。

 h1{ border-bottom: solid 1px black; } h1 span{ background-color: red; } 

 <h1 id="events"> <span>FUTURE THINGS</span> </h1>