Nav Überlauf in andere Divs

Question

:)

Ich versuche, eine Portfolio-Website zu erstellen. Das aktuelle Layout meiner Website ist ein Logo, eine Navigationsleiste und dann der Inhalt unten. Leider habe ich Probleme damit, dass meine Navigationsleiste nicht in meine folgenden Inhalte überläuft. Derzeit habe ich meine Nav-Leiste als ungeordnete Liste eingerichtet (von Nav ul und Nav li gesehen). Im Abschnitt @media definiere ich die gleiche ungeordnete Liste für ein mobiles Gerät. Im Wesentlichen möchte ich, dass meine Navigationsleiste von "Inline-Block" zu "Blockieren" wechselt, um auf einem mobilen Gerät besser angezeigt zu werden, oder wenn der Browser schmaler wird. Sehen Sie irgendwelche aktuellen Probleme mit meinem Nav-Setup?

Vielen Dank für Ihre Hilfe !!

my nav code displayed ...

nav { 
    width:1024px; 
    height:20px; 
    margin: auto; 
    font-family: 'Roboto Condensed', sans-serif; 
} 

nav ul { 
    list-style-type: none; 
} 


nav li { 
    display:inline-block; 
    margin-left: 50px; 
} 


@media only screen and (max-width: 468px) { 


    nav { 


    } 
    nav ul { 
     height: 60px; 
    } 

    nav li { 
     display:block; 
     text-transform:uppercase; 
     width:40%; 
     padding: .7em; 
     line-height:20px; 
     height:30px; 
     border-bottom:2px solid #000; 
    } 

...

---

...

<ul> 
    <li><a href="index.html">WELCOME</a></li> 
    <li><a href="about.html">ABOUT</a></li> 
    <li><a href="resume.html">RESUME</a></li> 
    <li><a href="design.html">DESIGN</a></li> 
    <li><a href="photography.html">PHOTOGRAPHY</a></li> 
</ul> 

...

Answer 1

Mein Vorschlag ist es, Hamburger-Menü in Mobile zu verwenden, da Sie mehr Links im Menü haben, gibt es keine Möglichkeit, Sie alle an diesem Ort einstellen können.

Answer 2

Der Überlauf wird verursacht, indem height von nav auf 20px gesetzt wird, was zu klein ist, um die Nav-Kinder zu enthalten.

Zusätzlich Sie nicht sagen, wie Sie das Layout genau sein wollen, vermute ich will nur das Menü, um den benötigten Platz zu besetzen, anstatt überfüllt, in dieser Sache, nur um der height Eigenschaft los:

nav { 
 
    max-width: 1024px; 
 
    width: 100%; 
 
    margin: auto; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    border:1px solid red; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin-left: 50px; 
 
} 
 

 
@media only screen and (max-width: 468px) { 
 
    nav li { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    padding: .7em; 
 
    line-height: 20px; 
 
    height: 30px; 
 
    border-bottom: 2px solid #000; 
 
    } 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">WELCOME</a></li> 
 
    <li><a href="about.html">ABOUT</a></li> 
 
    <li><a href="resume.html">RESUME</a></li> 
 
    <li><a href="design.html">DESIGN</a></li> 
 
    <li><a href="photography.html">PHOTOGRAPHY</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="somecontent"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat, debitis perspiciatis praesentium, laboriosam magnam dolorum dolore, distinctio incidunt voluptatum corporis labore. Dolore non praesentium omnis accusamus aut magni voluptatibus. 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/wux8pp57/2/

Randbemerkung: Wenn Sie wirklich die nav sein respo wollen nsive, setze keinen festen width von 1024px, stattdessen kannst du die Breite 100% machen und max-width: 1024px hinzufügen.

* Eine rote Umrandung zur Demonstration hinzugefügt.