Ist es möglich, eine einzelne ungeordnete Liste zu haben, die standardmäßig als zwei Spalten angezeigt wird, aber in Antwort auf eine einzelne Spalte über media query zurückkehrt, die unten gezeigt wird?Antwortende 2-Spalten-zu-einzelne-Spalte-Liste
@media (max-width: 640px)
Die Anzahl der Elemente in der Liste ist unbekannt, und ich möchte mit mehreren Listen vermeiden (zum Beispiel Tags programmatisch Einfügen)
Ja, es ist möglich.
width von li-50% und float:leftfloat und stellen Sie die width von li zu 100%li {
width: 50%;
float: left
}
@media (max-width: 640px) {
li {
width: 100%;
float: none;
}
}<ul>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
</ul>Wenn die Länge der Listen dynamisch ist, kann man davon ausgehen, dass Sie die Kontrolle über die HTML-Generierung mit etwas wie PHP haben?
Wenn ja, und wenn Sie tatsächlich suchen, um eine Spalte statt Ausbreitung einer Liste a/bc/d, etc über zwei Spalten zu brechen, können Sie programmatisch einfügen
</ul>
<ul>
, wenn Sie in die Liste erhalten Mittelpunkt. Definieren Sie ULs, die normalerweise als Inline-Block-Elemente angezeigt werden, und blockieren Sie Elemente in Ihrer Medienabfrage für kleine Bildschirme. Möglicherweise müssen Sie auf den ULs Padding/Rand festlegen, damit der Abstand zwischen den Blöcken verschwindet, sodass die Liste in einem einzelnen Spaltenlayout zusammenhängend aussieht.
Sie mit Flex versuchen könnten, wenn durch die Zeilen Zeile gezeichnet wird, ist mit Ihren Bedürfnissen fein: http://codepen.io/anon/pen/Myrwam oder Schnipsel unten in voller Seite spielen, dann Fenster Breite 639px zu reduzieren.
min-width setzt hier den Punkt, an dem 2 Elemente nicht auf 1 Zeile stehen können. 320px setzt den Bruchpunkt bei 640px, unten kann nur einer da sein und es wird die volle Breite mit den Flex-Eigenschaften erweitern (Grow: 1).
ul {
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
display: block;
min-width: 320px;
width:50%;
box-shadow: 0 0 0 2px;
flex: 1 0 auto;
background:tomato;
color:white;
font-size:1.5em;
text-align:center;
}
li:nth-child(even) {
background:#1975B5;
}
li {
counter-increment: linbr;
}
li:before {
content: counter(linbr);
}<ul>
<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>ähnliches Beispiel @dippas nur mit etwas weniger CSS als standardmäßig sind die li-Elemente Block Stile, so dass keine Notwendigkeit, eine Breite einzustellen: 100%; und schweben: keine;
macht nur den Code aufgeräumt (IMO) und wenn eine große Website das Gesamtgewicht der CSS-Datei leichter.
@media (min-width: 640px) {
li {
float: left;
width: 50%;
}
}<ul>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
</ul>
Ja, ich dachte über diesen Ansatz, aber ich mag es nicht semantisch mögen. Die Liste der Elemente besteht aus einer einzigen Liste, und ich möchte eine Aufteilung in mehrere Listen-Tags vermeiden. – GWR