Zdaję sobie sprawę, że można określić niestandardową grafikę jako znak zastępczy punktora, używając atrybutu CSS:
list-style-image
A następnie nadanie mu adresu URL.
Jednak w moim przypadku chcę po prostu użyć symbolu „+”. Nie chcę do tego tworzyć grafiki, a następnie wskazywać na nią. Wolałbym po prostu poinstruować listę nieuporządkowaną, aby używała symbolu plusa jako symbolu punktora.
Czy można to zrobić, czy jestem zmuszony najpierw zrobić z tego grafikę?
źródło
To jest późna odpowiedź, ale właśnie natknąłem się na to ... Aby uzyskać poprawne wcięcie w każdym zawijanym wierszu, wypróbuj to w ten sposób:
źródło
text-indent: -2ch
celu uwzględnienia znaku + i spacji po nim, a następniepadding-right: 1ch
dodania tej spacji. Mimo to duże +1.Tyle rozwiązań.
Ale nadal uważam, że jest miejsce na poprawę.
Zalety:
(bez wartości bezwzględnych pikseli)
(bez lekkiego przesunięcia między pierwszą linią a kolejnymi liniami)
źródło
content: url('link-to-my-asset.svg');
i ustawić szerokość obrazu i dopełnienie między punktorem a treścią. Dzięki!To jest rozwiązanie W3C. Działa w przeglądarkach Firefox i Chrome.
http://dev.w3.org/csswg/css-lists/#marker-content
źródło
li:before {content:"…";}
był używany bez żadnego innego wcięcia i wyrównania.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 jednym wierszu. 1.2em to szerokość, jaką chcesz dla swojej postaci, zmień ją do swoich potrzeb.
źródło
float
ponownie? ... nie.Możesz użyć
:before
pseudo-selektora, aby wstawić zawartość przed elementem listy. Możesz znaleźć przykład w Quirksmode, pod adresem http://www.quirksmode.org/css/beforeafter.html . Używam tego do wstawiania gigantycznych cytatów wokół blokowych cytatów ...HTH.
źródło
W moim rozwiązaniu zastosowano pozycjonowanie, aby zawinięte linie automatycznie układały się prawidłowo. Nie musisz się więc martwić ustawieniem dopełnienia - przed samym li:.
źródło
Wskazane jest, aby zakwalifikować stylizację,
<li>
aby nie wpływała na<ol>
pozycje listy. Więc:źródło
Font-awesome zapewnia świetne rozwiązanie po wyjęciu z pudełka:
źródło
źródło
Styl kreski em:
źródło
Wolę używać ujemnego marginesu, daje większą kontrolę
źródło
Co ciekawe, nie wydaje mi się, aby którekolwiek z zamieszczonych rozwiązań było wystarczająco dobre, ponieważ polegają one na tym, że zastosowana postać ma szerokość 1em, co nie musi tak być (może z wyjątkiem odpowiedzi Johna Magnolii, która używa jednak pływaków, komplikować sprawy w inny sposób). Oto moja próba:
Ma to następujące zalety (w porównaniu z innymi rozwiązaniami):
text-align: center;
coś, co ci się podoba. Na przykład możesz spróbowaćcolor: red; text-align: right; padding-right: 5px; box-sizing: border-box;
lub jeśli nie lubisz bawić się border-box, po prostu odejmij dopełnienie (5px) od szerokości (czyli szerokość: 25px w tym przykładzie). Istnieje wiele opcji.Cieszyć się.
źródło
źródło
!important
, co było niezbędne, aby mój niestandardowy CSS w Blogspocie działałSpróbuj tego
źródło