フォーマットヘッダと今の国境

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によると、 あなたは、コンテナの子孫のブロックである < H1>タグの上にdiv.container1の境界線を持って来ることはできません。

Answer 2

これは奇妙な要求ですが、私はあなたがこのようにそれを行うことができますね。あなたはそれはあなたができることですとしてあなた<h1>を維持したい場合は

.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

また<span>をラップしてください。

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

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