W przypadku poniższego kodu HTML jaka jest najłatwiejsza metoda wyświetlenia listy jako dwóch kolumn?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Żądany wyświetlacz:
A B
C D
E
Rozwiązanie musi działać w przeglądarce Internet Explorer.
Odpowiedzi:
Nowoczesne przeglądarki
wykorzystaj moduł kolumn css3, aby wesprzeć to, czego szukasz.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
http://jsfiddle.net/HP85j/8/
Starsze przeglądarki
Niestety do obsługi IE potrzebujesz rozwiązania w postaci kodu, które wymaga JavaScript i manipulacji domem. Oznacza to, że za każdym razem, gdy zmienia się zawartość listy, będziesz musiał wykonać operację zmiany kolejności listy na kolumny i przedruku. Poniższe rozwiązanie używa jQuery dla zwięzłości.
http://jsfiddle.net/HP85j/19/
HTML:
JavaScript:
CSS:
EDYTOWAĆ:
Jak wskazano poniżej, uporządkuje kolumny w następujący sposób:
podczas gdy OP poprosił o wariant pasujący do następującego:
Aby zrealizować wariant, wystarczy zmienić kod na następujący:
źródło
A B
(drugi element powinien być dołączony po prawej stronie), ale w twoich przykładach jestA E
.Patrzyłem na rozwiązanie @ jaider, które działało, ale oferuję nieco inne podejście, które moim zdaniem jest łatwiejsze w obsłudze i które uważałem za dobre w różnych przeglądarkach.
Domyślnie nieporządkowana lista wyświetla pozycję pocisku na zewnątrz, ale w niektórych przeglądarkach powodowałaby pewne problemy z wyświetlaniem w zależności od sposobu rozmieszczenia witryny przez przeglądarkę.
Aby wyświetlić go w formacie:
itp. użyj następujących czynności:
To powinno rozwiązać wszystkie problemy z wyświetlaniem kolumn. Wszystkiego najlepszego i dziękuję @jaider, ponieważ Twoja odpowiedź pomogła mi to odkryć.
źródło
Próbowałem opublikować to jako komentarz, ale nie udało mi się poprawnie wyświetlić kolumn (zgodnie z pytaniem).
Pytasz o:
AB
Płyta CD
mi
... ale odpowiedź zaakceptowana jako rozwiązanie zwróci:
OGŁOSZENIE
BYĆ
do
... więc albo odpowiedź jest nieprawidłowa, albo pytanie brzmi.
Bardzo prostym rozwiązaniem byłoby ustawienie szerokości,
<ul>
a następnie przesunięcie i ustawienie szerokości<li>
przedmiotów w ten sposóbPrzykład tutaj http://jsfiddle.net/Jayx/Qbz9S/1/
Jeśli twoje pytanie jest błędne, zastosowanie mają poprzednie odpowiedzi (z poprawką JS na brak obsługi IE).
źródło
Podoba mi się rozwiązanie dla nowoczesnych przeglądarek, ale brakuje pocisków, więc dodaję małą sztuczkę:
http://jsfiddle.net/HP85j/419/
źródło
list-style-position: inside;
jest lepszym rozwiązaniem, aby pociski prawidłowo się wyświetlały.Oto możliwe rozwiązanie:
Skrawek:
I gotowe.
Dla 3 kolumn użyj
li
szerokości jako 33%, dla 4 kolumn użyj 25% i tak dalej.źródło
To najprostszy sposób na zrobienie tego. Tylko CSS.
źródło
Możesz użyć CSS tylko do ustawienia dwóch lub więcej kolumn
źródło
Można to osiągnąć za pomocą właściwości css zliczania kolumn na div div,
lubić
sprawdź to, aby uzyskać więcej informacji.
Jak sprawić, by pływająca lista DIV była wyświetlana w kolumnach, a nie w wierszach
źródło
column-count
nie wyświetli elementów we właściwej kolejności. Na przykład pożądanym wyświetlaniem w pierwszym wierszu jestA B
(drugi element powinien być dołączony po prawej stronie), ale jeślicolumn-count
go użyjesz, to będzieA E
.Możesz to zrobić naprawdę łatwo za pomocą wtyczki jQuery-Columns, na przykład, aby podzielić ul z klasą .mylist, którą zrobiłbyś
Oto przykład na żywo na jsfiddle
Podoba mi się to lepiej niż w CSS, ponieważ w rozwiązaniu CSS nie wszystko wyrównuje się pionowo do góry.
źródło
<ul>
listę na wiele list ... To może skomplikować inne rzeczy.jeszcze jedna odpowiedź po kilku latach!
w tym artykule: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
CSS:
źródło
Na
updateColumns()
potrzebyif (column >= columns.length)
zamiastif (column > columns.length)
wymienienie wszystkich elementów (C jest pominięty, na przykład), więc:http://jsfiddle.net/e2vH9/1/
źródło
Z Bootstrap ... Ta odpowiedź ( https://stackoverflow.com/a/23005046/1128742 ) zwróciła mnie do tego rozwiązania:
http://jsfiddle.net/patrickbad767/472r0ynf/
źródło
Starsze rozwiązanie w górnej odpowiedzi nie działało dla mnie, ponieważ chciałem wpłynąć na wiele list na stronie, a odpowiedź zakłada jedną listę i wykorzystuje całkiem sporo stanu globalnego. W tym przypadku chciałem zmienić każdą listę w
<section class="list-content">
:źródło
Chociaż znalazłem odpowiedź Gabriela do pracy w pewnym stopniu, znalazłem następujące przy próbie uporządkowania listy w pionie (pierwsza ul AD i druga ul EG):
Poprawiłem JQuery, więc mam nadzieję, że powyższe nie nastąpi.
źródło
To było dla mnie idealne rozwiązanie, patrząc od lat:
http://css-tricks.com/forums/topic/two-column-unordered-list/
źródło
Abdul
w jego odpowiedzi, identyczny nawet z zastosowaną szerokością i identyfikatorem.