Na przykład muszę użyć symbolu gwiazdki (★) jako punktora dla pozycji listy.
Przeczytałem moduł CSS3: Listy , który opisuje, jak używać niestandardowego tekstu jako punktorów, ale nie działa dla mnie. Myślę, że przeglądarki po prostu nie obsługują ::marker
pseudoelementu.
Jak mogę to zrobić bez używania obrazów?
html
css
html-lists
AntonAL
źródło
źródło
Odpowiedzi:
EDYTOWAĆ
Prawdopodobnie nie polecałbym już używania obrazów. Trzymałbym się podejścia polegającego na używaniu znaku Unicode, na przykład:
STARA ODPOWIEDŹ
Prawdopodobnie wybrałbym tło obrazu, są znacznie bardziej
wydajne,wszechstronne i przyjazne dla różnych przeglądarek.Oto przykład:
źródło
<li>
tekst się zawija: punktor nie pozostaje bez wcięcia i wygląda jak początek akapitu tekstu. Ta odpowiedź rozwiązuje ten problem: stackoverflow.com/a/14301918/1450294Używanie tekstu jako punktorów
Użyj
li:before
z encją HTML HTML ze zmianą znaczenia (lub dowolnym zwykłym tekstem).Przykład
Mój przykład utworzy listy ze znacznikami wyboru jako punktorami.
CSS :
Zgodność z przeglądarkami
Sam nie testowałem, ale powinno być obsługiwane od IE8. Tak przynajmniej mówią quirksmode i css-tricks .
Możesz użyć komentarzy warunkowych, aby zastosować starsze / wolniejsze rozwiązania, takie jak obrazy lub skrypty. Jeszcze lepiej, użyj obu z
<noscript>
dla obrazów.HTML :
O obrazach tła
Obrazy tła są rzeczywiście łatwe w obsłudze, ale ...
background-size
właściwie tylko w IE9.list-style
(bardziej logiczny wybór).Cieszyć się.
źródło
li
elementu zawija się w wielu wierszach; te zawinięte wiersze nie będą poprawnie wcięte.float: left; margin-left: -12px;
on the: before, aby się tym zająć, @RichardEverettMożesz go zbudować:
źródło
'\21B3'
! Dzięki! Zadziałało lepiej niż inne odpowiedzi tutaj. Zmieniono takżepadding-left
w moim projekcie na1em
, które dostosowuje się dobrze, gdy poziomy twojego drzewa zmieniają rozmiar.aktualizacja: w komentarzach Goerge mówi „Działa to w Chrome, Firefox i Edge, ale nie w Safari”.
To jest rozwiązanie W3C. Możesz go użyć w 3012!
https://drafts.csswg.org/css-lists/#text-markers
źródło
li:before
rozwiązania.Obrazy nie są zalecane, ponieważ na niektórych urządzeniach (urządzenia Apple z wyświetlaczem Retina) mogą być wyświetlane w pikselach lub po powiększeniu. Dzięki postaci lista za każdym razem wygląda niesamowicie.
Oto najlepsze rozwiązanie, jakie do tej pory znalazłem. Działa świetnie i jest cross-browser (IE 8+).
Ważne jest, aby znak znajdował się w pływającym bloku o stałej szerokości, aby tekst pozostał wyrównany, jeśli jest zbyt długi, aby zmieścić się w pojedynczym wierszu. 1.2em to szerokość, jaką chcesz dla swojej postaci, zmień ją do swoich potrzeb. Nie zapomnij zresetować dopełnienia i marginesów dla elementów ul i li.
EDYCJA: Należy pamiętać, że rozmiar „1,2em” może się różnić, jeśli użyjesz innej czcionki w ul i li: before. Bezpieczniej jest używać pikseli.
źródło
Aby dodać gwiazdkę, użyj znaku Unicode
22C6
.Dodałem spację, aby zrobić małą przerwę między
li
gwiazdą a gwiazdą. Kod miejsca toA0
.źródło
Bardziej kompletny przykład odpowiedzi 222 :
Dodałem właściwości star-hack, aby przywrócić domyślne style list w starszych wersjach IE. Możesz je wyciągnąć i dołączyć do warunkowego dołączania, jeśli chcesz, lub zastąpić rozwiązaniem opartym na obrazie tła. Moja skromna opinia jest taka, że specjalne style punktorów zaimplementowane w ten sposób powinny z wdziękiem degradować się w nielicznych przeglądarkach, które nie obsługują pseudoselektorów.
Przetestowany w Firefox, Chrome, Safari i IE8-10 i renderuje się poprawnie we wszystkich.
źródło
text-indent: -1em;
jest ważną właściwością, jeśli masz elementy listy wielowierszowej. Bez niego druga i kolejne linie są wyrównane z kulą, a nie z poprzednią linią.źródło
Przejrzałem całą listę i od 2020 roku są tam częściowo poprawne i częściowo niepoprawne elementy.
Odkryłem, że wcięcie i przesunięcie były największym problemem podczas korzystania z UTF-8, więc publikuję to jako rozwiązanie CSS zgodne z 2020 r., Używając jako przykładu punktora „pionowy trójkąt”.
użyj
em
jako jednostki, aby uniknąć konfliktu z rozmiarami czcionekźródło
Wypróbuj ten kod ...
źródło
Ten temat może być stary, ale tutaj jest szybka poprawka
ul {list-style:outside none square;}
lubul {list-style:outside none disc;}
itp.następnie dodaj lewe wypełnienie do elementu listy
źródło