格式化標題和邊框

Question

現在，我使用此代碼的工作：

HTML：

<div class="container"> 
    <h1> nonono </h1> 
</div> 

CSS：

.container { 
    border-bottom: 2px solid; 
} 

h1 { 
    border: 2px solid; 
    width: auto; 
} 

我希望能有邊境只有大約標題的文本並沒有遍佈整個空間寬度。容器的下邊框應該與中間的文本邊框創建的「框」交叉。

事情是這樣的：

有誰有如何做到這一點的提示？

JSFiddle

Answer 1

嘗試運行下面的代碼片段，這應該工作，即使< H1>標籤具有背景色

.container1 { 
 
    border-bottom: 2px solid; 
 
    overflow-x: visible; 
 
    height: 1.5em; 
 

 
} 
 

 
h1 { 
 
    border: 1px solid #7788BB; 
 
    display: inline; 
 
    margin-left: 1em; 
 
    padding: 2px; 
 
    background-color: #3AF; 
 
} 
 

 
hr { 
 
    margin-top: 1.5em; 
 
    border: 1px solid #111; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<div class="container1"> 
 
    <h1> nonono </h1> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="container2"> 
 
    <hr/>  
 
    <h1> nonono </h1> 
 
</div> 

另見JSFiddle

注：根據CSS Box Model，CSS Layer Stack和Stacking Context， 你永遠不能帶來div.container1的邊界上 < H1>標籤，它是容器的後裔塊的頂部。

Answer 2

這是一個奇怪的要求，但我想你可以做這樣的：

.container { 
 
    border-bottom: 2px solid; 
 
    height: 42px; 
 
} 
 

 
h1 { 
 
    border: 2px solid; 
 
    width: auto; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <h1> nonono </h1> 
 
</div>

Answer 3

如果你要保持你的<h1>，因爲它是你可以也只是將<span>包裝進去。

<div class="container"> 
    <h1> 
    <span>nonono</span> 
    </h1> 
</div> 

h1 > span { 
    border: 2px solid; 
    width: auto; 
}