Wie wird die Überschrift und die Navigationsleiste horizontal ausgerichtet?

Ich habe eine Navbar, ich habe eine Überschrift. Mein Problem tritt auf, wenn ich versuche, meine Überschrift auf die gleiche "Zeile" meiner Navigationsleiste zu setzen, wenn das Sinn macht. Wenn ich mein h2-Element platziere, wird der Text ursprünglich über der Navigationsleiste angezeigt.Wie wird die Überschrift und die Navigationsleiste horizontal ausgerichtet?

Wenn ich das h2-Element repariere, wird es linksbündig ausgerichtet und überlappt meine Navbar, obwohl ich angegeben habe, dass es im HTML zentriert ist. Kann jemand bitte erklären, was eine Webseite das macht? Und warum feste Elemente nicht bewegt werden können (linksbündig, zentriert, rechtsbündig usw.)

Ich weiß nicht, ob mein Container das Problem ist, mein Container wird der grundlegende, gut "Container" für alle Informationen sein Das wird auf dieser Seite angezeigt.

Schließlich bin ich neu in HTML und jede Information wird auf lange Sicht nützlich sein. Vielen Dank.

JSFIDDLE

body { 
 
    font-family: Arial, Verdana, sans-serif; 
 
    background-color: white; 
 
} 
 
.logo { 
 
    margin-left: 25px; 
 
} 
 
.navbar { 
 
    margin-top: 50px; 
 
    margin-left: 25px; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    float: left; 
 
} 
 
h2 { 
 
    margin-top: 50px; 
 
    font-size: 35px; 
 
    position: fixed; 
 
} 
 
.container { 
 
    text-align: center; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 175px; 
 
    background-color: #f1f1f1; 
 
    border: 2px solid #555; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 12px 0 12px 0; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
li { 
 
    text-align: center; 
 
    border-bottom: 1px solid #555; 
 
} 
 
li:last-child { 
 
    border-bottom: none; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
 
    <title>CSGOMarble</title> 
 
</head> 
 

 
<body> 
 
    <h3 style="float: right; margin-right: 25px;"> 
 
    <a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a> 
 
    </h3> 
 
    <div class="logo"> 
 
    <img src="logo.png" alt="LOGO" height="60px" width="200px"> 
 
    </div> 
 
    <hr> 
 
    <div class="container"> 
 
    <h2 style="text-align: center;">Welcome to CSGOMarble!</h2> 
 
    </div> 
 
    <div class="navbar"> 
 
    <ul> 
 
     <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li> 
 
     <li><a href="coinflip.html">COINFLIP</a></li> 
 
     <li><a href="about.html">ABOUT</a></li> 
 
     <li><a href="contact.html">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-04-05 Senoj

Wenn Sie ein Element zu beheben, nimmt sie das Element aus dem Fluss des Dokuments (oder DOM) und endet in der „0 0“ Position des aktuellen Kontextes ist (entweder der Körper oder der nächste Elterncontainer mit einer "Position" von "relativ". Wenn ein Element diese Position (z. B. Ihr Navigationselement) im Dokument belegt, überlappt das feste Element es, wenn es nicht anderweitig positioniert wird. – litel

Siehe spec auf MDN.

position:fixed Sie Raum nicht für das Element verlassen. Positionieren Sie es stattdessen an einer bestimmten Position relativ zum Ansichtsfenster des Bildschirms und verschieben Sie es nicht beim Scrollen. Beim Drucken positionieren Sie es an dieser festen Position auf jeder Seite. Dieser Wert erstellt immer einen neuen Stapelkontext.

Sie sollten das also nicht verwenden, um zwei Elemente nebeneinander zu platzieren. Stattdessen könnten Sie Schwimmer verwenden, Inline-Block, Flexbox usw. Hier ist ein Beispiel für float:

.navbar { 
    float: left; 
    width: 50%; 
} 
.container { 
    float: right; 
    width: 50%; 
}

jsFiddle

Edit: Um die Position zu zentrieren, Sie CSS3 calc(), aktualisierten Code verwenden könnte unten.

.navbar { 
    float: left; 
    width: 175px; 
    margin-left: 25px; 
} 
.container { 
    float: right; 
    width: calc(100% - 200px); /*175+25=200*/ 
}

jsFiddle

Quelle

2016-04-05 23:34:57 Stickers

Alles, was Sie tun müssen, ist geben sowohl die h2 und die navbardisplay:inline-block;. Keine Notwendigkeit für position:fixed;. Ordne auch den HTML-Code so an, dass die Navigationsleiste vor dem h2 steht.

https://jsfiddle.net/muor36cv/

Quelle

2016-04-05 23:33:40 Wowsk

Wie oben erwähnt , der Inhalt von h2 ist nicht mehr zentriert? Warum ist das? Vielen Dank. – Senoj

Dies liegt daran, dass die Breite der h2 auf den Rest des Platzes geschrumpft wird die Navigationsleiste. Es ist immer noch zentriert, nur die Breite der h2 ist nicht so groß wie vorher. – Wowsk

Wie wird die Überschrift und die Navigationsleiste horizontal ausgerichtet?

Antwort

Verwandte Themen