Schreiben von CSS für Element zum Umbrechen

Ich habe versucht, hundert verschiedene Kombinationen für meine Menüleiste (sekundäres Menü) in zwei Zeilen zu umbrechen, wenn in kleineren Browser-Bildschirm oder Gerät angezeigt.Schreiben von CSS für Element zum Umbrechen

Der letzte, den ich versuchte, war dies:

@viewport { 
width: device-width; 

@media only screen and (min-width : 375px) and (max-width : 667px) { 
    .secondary-menu { 
     display: flex; 
     flex-direction: row; 
     flex-wrap: wrap; 
    } 
}

Kann jemand bitte helfen Sie mir, diesen Code zu beheben oder ein anderes schreiben, die mit allen Tasten auf einem kleineren Bildschirm zwei Zeilen für die obere grüne Menüleiste zeigt automatisch? (Der Rest meiner Site ist reaktionsfähig, so dass ich diese Aufgabe nicht für die gesamte Site ausführen muss, nur dieses Element.)

Quelle

2016-07-07 trying to create my website

http://stackoverflow.com/a/37844240/3597276 –

Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht?") Müssen das gewünschte Verhalten, ein bestimmtes Problem oder einen Fehler und den kürzesten Code enthalten reproduzieren ** es in der Frage selbst **. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). – Pete

Hallo. Dies ist nur, um Sie in die hoffentlich richtige Richtung zu zeigen. Versuchen Sie, mit der festen Position, dem Leerzeichen und der Anzeige zu spielen. .Sekundärmenü ul { Höhe: 35px; /* Position: fixiert; */ oben: 0; Hintergrundfarbe: # 0e6e3e; Marge: 0 -9999rem; Polsterung: .25rem 9999rem; /* Leerzeichen: nowrap; */ Überlauf: versteckt; Anzeige: Inline; } Beachten Sie, dass ich Position fixed und white-space nowrap auskommentiert habe. – Vcasso

-2

Sie sollten zuerst "height: auto" zu Ihrem ".secondary-menu ul" hinzufügen Klassendefinition.

Dann sollten Sie hinzufügen „float: left“, um Ihre aktuelle Sheet-Klasse, so dass die Klasse am Ende wie folgt wird:

.boldgrid-framework-menu li, .footer-center-menu li { 
    list-style: none; 
    display: inline; 
    list-style-type: none; 
    float: left; 
}

Jetzt, als ich Ihre Website zu skalieren, automatisch die Tasten auf einer anderen Zeile erscheinen.

Quelle

2016-07-07 14:15:34

Vielen Dank - das Problem wurde behoben. –

Wenn ich eine Bedingung für die Tertiärsknöpfe haben möchte, empfehle ich .boldgrid-framework-menu li, .tertiary-menu { \t Farbe: orange;}? –

Schreiben von CSS für Element zum Umbrechen

Antwort

Verwandte Themen