Wie kann ich diese Ausgabe in meinem Dropdown-Menü erreichen

ich nicht wirklich nicht, wie meine Frage zu erklären, mein erwartetes Ergebnis von Lesern zu bekommen, aber in soluction ich brauche Idee oder soluction auf, wie meine CSS Ausgabe, wie dieses Bild kodieren unten html Dropdown-MenüWie kann ich diese Ausgabe in meinem Dropdown-Menü erreichen

dies mein versucht Code:

a { 
 
    color: #4C9CF1; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 

 
a:hover { 
 
    color: #555; 
 
} 
 

 
nav { 
 
    float: left; 
 
    padding: 20px; 
 
} 
 

 
#menu-icon { 
 
    display: hidden; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #4C8FEC url(menu-icon.png) right; 
 
    border: 2px solid #000; 
 
    border-radius: 4px 0 4px 4px; 
 
} 
 

 
a:hover#menu-icon { 
 
    background-color: #444; 
 
    border-radius: 4px 4px 0 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: right; 
 
} 
 

 
section { 
 
    margin: 80px auto 40px; 
 
    max-width: 980px; 
 
    position: relative; 
 
    padding: 20px 
 
} 
 

 

 
/*MEDIA QUERY*/ 
 

 
@media only screen and (max-width: 640px) { 
 
    header { 
 
    position: absolute; 
 
    } 
 
    #menu-icon { 
 
    display: inline-block; 
 
    } 
 
    nav ul, 
 
    nav:active ul { 
 
    display: none; 
 
    position: absolute; 
 
    padding: 2px; 
 
    border: 2px solid #000; 
 
    center: 20px; 
 
    width: 100%; 
 
    border-radius: 4px 0 4px 4px; 
 
    } 
 
    nav li { 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 2px 0; 
 
    margin: 0; 
 
    } 
 
    nav:hover ul { 
 
    display: block; 
 
    }

<nav> 
 
    <a href="#" id="menu-icon"></a> 
 
    <ul> 
 
     <li><a href="#" class="current">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav>

aber es Ausgabe meines Dropdown-Menü wie diese

was soll ich tue großen Dank für Ihre Zeit und Auswirkungen in meinem soluction

Quelle

2017-12-09 Kingsley Plaza

Beginnen Sie mit dem Entfernen von 'Breite: 100%' 'von nav li'. Dann ist es nur eine Lage mit Polsterungen/margin usw. – panther

@panther Uhr Leider kann ich nicht wirklich Ihre Idee kann in Antworten einer Code-Ausgabe Ihrer Idee geben? –

Sorry, ich möchte es jetzt nicht programmieren. Sie müssen beide (Symbol und Menü) in eine Zeile setzen (für beide mit float oder inline-block, ohne Positionierung). Dann müssen Sie 100% Breite für "ul" entfernen. Jetzt müssen Sie 'li' in einer Zeile ausrichten, wieder entfernen Sie 100% Breite. Es ist all die Magie. – panther

erste:

https://jsfiddle.net/Liamm12/9wkavvd0/1/

Second One:

https://jsfiddle.net/Liamm12/9wkavvd0/2/

Hallo!

Vielleicht das, was Sie

Ertste

a { 
 
    color: #4C9CF1; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 

 
a:hover { 
 
    color: #555; 
 
} 
 

 
nav { 
 
    float: left; 
 
    padding: 20px; 
 
} 
 

 
#menu-icon { 
 
    display: hidden; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #4C8FEC url(menu-icon.png) right; 
 
    border: 2px solid #000; 
 
    border-radius: 4px 0 4px 4px; 
 
} 
 

 
a:hover#menu-icon { 
 
    background-color: #444; 
 
    border-radius: 4px 4px 0 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: right; 
 
} 
 

 
section { 
 
    margin: 80px auto 40px; 
 
    max-width: 980px; 
 
    position: relative; 
 
    padding: 20px 
 
} 
 

 

 
/*MEDIA QUERY*/ 
 

 
@media only screen and (max-width: 640px) { 
 
    header { 
 
    position: absolute; 
 
    } 
 
    #menu-icon { 
 
    display: inline-block; 
 
    } 
 
    nav{ 
 
    display:flex; 
 
    } 
 
    nav ul, 
 
    nav:active ul { 
 
    display: none; 
 
    padding: 6px 0px 0px 1px; 
 
    margin-left: 15px; 
 
    margin-top: 0px; 
 
    border: 2px solid #000; 
 
    border-radius: 4px 0 4px 4px; 
 
    } 
 
    nav li { 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 2px 0; 
 
    margin: 0; 
 
    } 
 
    nav:hover ul { 
 
    display: block; 
 
    }

<nav> 
 
    <a href="#" id="menu-icon"></a> 
 
    <ul> 
 
     <li><a href="#" class="current">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav>

zweiten zu tun suchen:

a { 
 
    color: #4C9CF1; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 

 
a:hover { 
 
    color: #555; 
 
} 
 

 
nav { 
 
    float: left; 
 
    padding: 20px; 
 
} 
 

 
#menu-icon { 
 
    display: hidden; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #4C8FEC url(menu-icon.png) right; 
 
    border: 2px solid #000; 
 
    border-radius: 4px 0 4px 4px; 
 
} 
 

 
a:hover#menu-icon { 
 
    background-color: #444; 
 
    border-radius: 4px 4px 0 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: right; 
 
} 
 

 
section { 
 
    margin: 80px auto 40px; 
 
    max-width: 980px; 
 
    position: relative; 
 
    padding: 20px 
 
} 
 

 

 
/*MEDIA QUERY*/ 
 

 
@media only screen and (max-width: 640px) { 
 
    header { 
 
    position: absolute; 
 
    } 
 
    #menu-icon { 
 
    display: inline-block; 
 
    } 
 
    nav{ 
 
    display:flex; 
 
    } 
 
    nav ul, 
 
    nav:active ul { 
 
    display: none; 
 
    padding: 6px 0px 0px 1px; 
 
    margin-left: 15px; 
 
    margin-top: 0px; 
 
    border: 2px solid #000; 
 
    border-radius: 4px 0 4px 4px; 
 
    } 
 
    nav li { 
 
padding: 4px 8px 10px 5px; 
 
    margin: 0; 
 
    } 
 
    nav:hover ul { 
 
    display: block; 
 
    }

<nav> 
 
    <a href="#" id="menu-icon"></a> 
 
    <ul> 
 
     <li><a href="#" class="current">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav>

Quelle

2017-12-09 23:59:45 Liam

Ihr Problem zu lösen nur die Flexbox nutzen!

.nav { 
    display: flex; 
    padding: 20px 
} 

nav li { 
    flex: 1 
}

das nav zu display: flex lagen in einer Linie, die beiden Elemente zu zeigen. Entferne die Breite von 100% von li und setze eine flex:1 so, dass sie auf den gegebenen Platz expandiert. Wenn Sie eine maximale Breite festlegen möchten, legen Sie sie einfach mit einem Wert Ihrer Übereinstimmung fest, um sie an einen maximalen Erweiterungsbereich zu binden.

Entfernen Sie die folgenden

li { 
    display: inline-block; 
    float: right; 
}

Weitere Infos zum Flexbox: https://www.w3schools.com/css/css3_flexbox.asp

Quelle

2017-12-09 23:53:29 Flo

Wie kann ich diese Ausgabe in meinem Dropdown-Menü erreichen

Antwort

Verwandte Themen