Niestandardowy symbol punktora dla elementów <li> w <ul>, który jest zwykłym znakiem, a nie obrazem

125

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ę?

idStar
źródło

Odpowiedzi:

81

Poniższy cytat pochodzi z Taming Lists :

Może się zdarzyć, że masz listę, ale nie chcesz żadnych punktorów lub chcesz użyć innego znaku zamiast punktora. Ponownie CSS zapewnia proste rozwiązanie. Po prostu dodaj styl listy: brak; do swojej reguły i wymuś wyświetlanie listy LI z wiszącymi wcięciami. Reguła będzie wyglądać mniej więcej tak:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Albo dopełnienie, albo margines musi być ustawiony na zero, a drugi na 1em. W zależności od wybranego „punktora” może być konieczne zmodyfikowanie tej wartości. Ujemne wcięcie tekstu powoduje przesunięcie pierwszego wiersza w lewo o tę wartość, tworząc wysunięcie.

Kod HTML będzie zawierał nasze standardowe UL, ale z dowolnym znakiem lub jednostką HTML, której chcesz użyć zamiast punktora poprzedzającego treść elementu listy. W naszym przypadku użyjemy », podwójnego cudzysłowu prawego:».

»Punkt 1
» Punkt 2
»Punkt 3
» Punkt 4
»Punkt 5 wydłużymy
   trochę, żeby
   się owinął

Ewangelista TJ WealthEngine API
źródło
1
Twoje rozwiązanie zadziałało w połączeniu z pseudo-selektorem: before, na który wskażesz Ty i @Tieson T. Podobało mi się, że powiedziałeś, jak różne atrybuty w <UL> współdziałają, aby naśladować wcięcia pocisku.
idStar
9
Tak to złożyłem, że zadziałało: ul {rozmiar czcionki: 14px; wysokość linii: 16px; styl listy: brak; margin-left: 0; padding-left: 1em; wcięcie tekstu: -1em; } li: before {content: "+"; } Musiałem wstawić spację po symbolu +, ale wygląda to całkiem dobrze.
idStar
6
Niestety w przypadku tej metody znak punktora jest uwzględniany w selekcji, co nie ma miejsca w przypadku zwykłych pocisków.
Konrad Höffner
169

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:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
Mike T.
źródło
1
Dla mnie lepiej jest użyć ch jako jednostki miary, szczególnie w text-indent: -2chcelu uwzględnienia znaku + i spacji po nim, a następnie padding-right: 1chdodania tej spacji. Mimo to duże +1.
cobaltduck
44

Tyle rozwiązań.
Ale nadal uważam, że jest miejsce na poprawę.

Zalety:

  • bardzo kompaktowy kod
  • działa z dowolnym rozmiarem czcionki
    (bez wartości bezwzględnych pikseli)
  • idealnie wyrównuje rzędy
    (bez lekkiego przesunięcia między pierwszą linią a kolejnymi liniami)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Jpsy
źródło
2
to jest najlepsze
user3168511
1
Moim zdaniem jest to lepsza odpowiedź, ponieważ wskazuje, w jaki sposób można dostosować również inne szczegóły. Jest też dołączony „Uruchom fragment kodu”!
Ionuț Ciuta
1
To powinna być odpowiedź. Czyste i proste
EvilDr
1
Szukałem rozwiązania za pomocą obrazu i wypróbowałem wiele odpowiedzi, ale to zadziałało najlepiej! Udało mi się użyć content: url('link-to-my-asset.svg');i ustawić szerokość obrazu i dopełnienie między punktorem a treścią. Dzięki!
AnnieP
To dobra odpowiedź. Jednak potrzebowałem rozwiązania, które mogłoby również obsługiwać liczbę kolumn
Kushagr Arora
29

To jest rozwiązanie W3C. Działa w przeglądarkach Firefox i Chrome.

ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }
  <ul><li>item</li></ul>

PHPst
źródło
2
Chociaż wydaje się, że działa w obecnych wersjach Firefoksa, wynik jest wyjątkowo brzydki: niestandardowy punktor jest umieszczany tuż przed treścią tekstową (przyciąganie do niego), prawie tak, jakby li:before {content:"…";}był używany bez żadnego innego wcięcia i wyrównania.
Anton Samsonov
19

Oto najlepsze rozwiązanie, jakie do tej pory znalazłem. Działa świetnie i jest cross-browser (IE 8+).

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

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.

NicolasBernier
źródło
To z pewnością najlepsze rozwiązanie, jakie znalazłem.
Charles Roper,
nadużywanie floatponownie? ... nie.
10

Możesz użyć :beforepseudo-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.

Tieson T.
źródło
10

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:.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

user648519
źródło
8

Wskazane jest, aby zakwalifikować stylizację, <li>aby nie wpływała na <ol>pozycje listy. Więc:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}
silverliebt
źródło
8

Font-awesome zapewnia świetne rozwiązanie po wyjęciu z pudełka:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

sdw
źródło
4

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

pion
źródło
Głosowałem w górę tylko z powodu / * skopiuj i wklej punktor z HTML w przeglądarce do css (bez używania kodów ASCII) * /
kheya
2

Styl kreski em:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
dmartinezfernandez
źródło
1

Wolę używać ujemnego marginesu, daje większą kontrolę

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
John Magnolia
źródło
1

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:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ma to następujące zalety (w porównaniu z innymi rozwiązaniami):

  1. Nie zależy od szerokości symbolu, jak widać w przykładzie. Użyłem dwóch znaków, aby pokazać, że działa nawet z szerokimi pociskami. Jeśli spróbujesz tego w innych rozwiązaniach, tekst jest nieprawidłowo wyrównany (w rzeczywistości jest nawet widoczny z symbolem * w wyższych powiększeniach).
  2. Daje całkowitą kontrolę nad przestrzenią używaną przez pociski . Możesz zamienić 30px na cokolwiek (nawet 1em itp.). Tylko nie zapomnij zmienić go we wszystkich trzech miejscach.
  3. Jeśli daje pełną kontrolę nad pozycjonowaniem pocisku . Po prostu zamień na 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.
  4. Nie używa pływaków, więc można go umieścić w dowolnym miejscu.

Cieszyć się.

gorn
źródło
1

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>

Viraj Giri
źródło
Dziękuję - to jest bardzo czyste i zapomniałem o tym !important, co było niezbędne, aby mój niestandardowy CSS w Blogspocie działał
velkoon
-2

Spróbuj tego

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

venkat
źródło