Formatierung Header und seine Grenze

Question

Im Moment arbeite ich mit diesem Code:

HTML:

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

CSS:

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

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

Ich hoffe, die Grenze zu haben, nur um der Text des Headers und nicht über die gesamte Breite verteilt. Der untere Rand des Containers sollte die "Box" kreuzen, die durch die Textränder in der Mitte erstellt wird.

Etwas wie folgt aus:

Hat jemand einen Hinweis darauf, wie dies zu tun?

JSFiddle

Answer 1

Versuchen Sie das Code-Snippet unten ausgeführt wird, sollte diese Arbeit, auch wenn die < h1> tag Hintergrundfarbe

.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> 

Siehe auch die JSFiddle

hat

HINWEIS: Nach den CSS Box Model, CSS Layer Stack und den Stacking Context, man kann nie die Grenze von div.container1 auf den h1 < bringen> Tag, der ein Abkömmling Block des Behälters ist.

Answer 2

Das ist eine seltsame Anfrage, aber ich denke, man es wie folgt tun:

.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

Wenn Sie Ihr <h1> behalten möchten, wie es Ihnen ist, kann wickeln Sie auch einfach einen <span> hinein.

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

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