Klasse begrenzt zu werden, anstatt sein Elements

.Menu { 
 
    background-color: black; 
 
    height: 500px; 
 
    margin: none; 
 
    padding: none; 
 
    border: none; 
 
} 
 
.Menu h1 { 
 
    color: White; 
 
    border: 5px solid white; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    font-family: 'Indie Flower', cursive; 
 
}

<div class="Menu"> 
 
    <h1>Home</h1> 
 
</div>

Here the menu is getting bordered with the header tag

Wie nur ich grenz den erste Header-Tag, aber nicht auch die Menüleiste? Warum ist das passiert?

Quelle

2017-12-01 RuhanUR

Frage –

Die Grenze ist nicht klar * ist * nur um den Header-Tag. Möglicherweise, was Sie wollen, ist nur Rand-unten auf diesem Tag, anstatt einer vollen Grenze rundum? –

Ich möchte nur die "Startseite" alle Seiten angrenzen, aber ich möchte nicht, dass es an das Menü grenzt, in dem es das "Zuhause" gibt. – RuhanUR

Es wird kein Rahmen um das gesamte Menü hinzugefügt, es funktioniert wie erwartet. Die h1 ist ein Block-Level-Element, also wird es die Breite des übergeordneten Containers sein. Das ist der Grund, warum die Grenze um den h1 Text ist, aber den ganzen Weg bis zu den Rändern erstreckt.

Wenn Sie es nur um das Wort "Home" möchten, können Sie display:inline-block zu den h1 Stilen hinzufügen, die die Grenze eng um die h1 wickeln werden. Verwenden Sie padding, wenn Sie es etwas höher oder breiter benötigen.

Quelle

2017-12-01 20:48:10

Ok, aber gibt es einen Weg, dieses Problem zu lösen, es aber trotzdem als Blockelement zu behalten? nur Neugierig – RuhanUR

Sie könnten eine 'Breite' auf dem' h1' setzen und das gleiche erreichen. –

hinzufügen

display: inline-block;

zu Ihrem H1-Tag

Quelle

2017-12-01 20:48:37 JiiB

Klasse begrenzt zu werden, anstatt sein Elements

Antwort

Verwandte Themen