Łącznik w stylu listy HTML

222

Czy istnieje sposób na utworzenie stylu listy w HTML za pomocą myślnika (tj. - lub - –lub - —) tj

<ul>
  <li>abc</li>
</ul>

Wyjście:

- abc

Przyszło mi do głowy zrobić coś takiego li:before { content: "-" };, chociaż nie znam wad tej opcji (i byłbym bardzo zobowiązany do uzyskania opinii).

Mówiąc bardziej ogólnie, nie miałbym nic przeciwko wiedzeniu, jak używać ogólnych znaków do elementów listy.

html css xhtml html-lists Brian M. Hunt
źródło

79

skoro myślnik jest często używany na listach, dlaczego domyślnie nie jest zawarty w css?

temirbek

101

co ważniejsze, dlaczego istnieje numeracja ormiańska i katakana ... ale nie kreski?

Henry C

108

Możesz użyć :beforei content:pamiętać, że nie jest to obsługiwane w IE 7 lub niższej. Jeśli nie masz nic przeciwko, to jest to najlepsze rozwiązanie. Aby uzyskać szczegółowe informacje, zobacz tabele kompatybilności CSS „ Czy mogę używać” lub QuirksMode .

Nieco nieprzyjemnym rozwiązaniem, które powinno działać w starszych przeglądarkach, jest użycie obrazu jako punktu kuli i po prostu nadanie mu wyglądu kreski. Zobacz W3C list-style-imagestronę dla przykładów.

Darko Z
źródło

27

Problem :beforepolega na tym, że gdy elementy listy rozciągają się na kilka wierszy, wcięcie w drugim wierszu rozpoczyna się tam, gdzie jest myślnik, a tym samym rujnuje efekt wcięcia na liście. Aby tego uniknąć, musisz użyć wiszących wcięć. Zobacz: alistapart.com/articles/taminglists

chiborg,

3

Aby umieścić mdash w contentużyciucontent: "\2014\a0"

Ivan Z

Zobacz odpowiedź na @ trzy, która jest bardziej ogólna i mniej gadatliwa!

Ben Vertonghen

221

Istnieje łatwa poprawka (wcięcie tekstu), aby utrzymać efekt listy wcięć w :beforepseudoklasie.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Rozwiń fragment kodu

aron.lakatos
źródło

14

Działa, ale nie zapomnij umieścić list-style-type: none;na <ul>elemencie.

toesslab

5

bez wcięcia tylkoul li:before{ content:"- ";}

Qlimax

4

Wolę dodać display: block; float: left;do tego, li:beforeco może łatwiej wyciągnąć go z przepływu treści, w przeciwnym razie trudno jest uzyskać błędy w ustawianiu pierwszego i kolejnych wierszy poprawnie. Lub odpowiedź Keyana Zhanga robi to również z absolutnym pozycjonowaniem.

Simon East

8

całkiem głupi, który list-style-type dashnie jest już częścią CSS

Pixelomo

Jakie byłoby rozwiązanie oparte tylko na HTML podobne do tego, które zaproponowałeś?

pluton

74

Oto wersja bez pozycji względnej lub bezwzględnej i bez wcięć tekstu:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Cieszyć się ;)

velop
źródło

1

świetny! sugerowałbym „ul.dash> li: before”. w przeciwnym razie wewnętrzne ulice zostaną pomieszane.

w.stoettinger

1

Wolę dodać display: block; float: left;do tego, li:beforeco może łatwiej wyciągnąć go z przepływu treści, w przeciwnym razie trudno jest uzyskać błędy w ustawianiu pierwszego i kolejnych wierszy poprawnie. Lub odpowiedź Keyana Zhanga robi to również z absolutnym pozycjonowaniem.

Simon East

Używam tego jako .activeklasy nawigacyjnej z li:before { visibility: hidden; }ili.active:before { visibility: visible; }

sshow

Najlepsza sugestia imo!

Ben Vertonghen

64

Użyj tego:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Jase
źródło

3

Niestety nie szanuje kolorów tekstu css.

Hereblur

7

Jedyne możliwe rozwiązanie dla wiadomości e

Oleg

Nie działa teraz zarówno w Gmailu (listopad 2018), jak i Outlook 2016.

user2875289,

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

skrzypce demo

Keyan Zhang
źródło

25

Pozwól, że dodam również moją wersję, głównie po to, by ponownie znaleźć swoje preferowane rozwiązanie:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

Rozwiń fragment kodu

https://codepen.io/burningTyger/pen/dNzgrQ

trzy
źródło

IMHO to najlepsze jak dotąd rozwiązanie. Dzięki za udostępnienie!

Axel

14

W moim przypadku dodanie tego kodu do CSS

ul {
    list-style-type: '- ';
}

było wystarczająco. Proste jak to jest.

Albert Sosnowski
źródło

1

Zakładając, że jest to stosunkowo nowy dodatek do CSS, ponieważ nie mogę znaleźć innej odpowiedzi, która by o nim wspominała, ale tak naprawdę powinna to być odpowiedź zaakceptowana w dzisiejszych czasach.

ahstro

4

Wydaje się, że jest to obsługiwane tylko w przeglądarce Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

dave

To jest teraz obsługiwane także w Chrome (od 79, jak sądzę): chromestatus.com/feature/5893875400966144 i caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

Jedna z najlepszych odpowiedzi nie działała dla mnie, ponieważ po trochę prób i błędów li: before potrzebował także wyświetlania reguły css: blok wbudowany.

To dla mnie w pełni działająca odpowiedź:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Joery
źródło

jest to napisane LESS / SASS.

Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

użytkownik3849374
źródło

prawdopodobnie `` ul {margin: 0; list-style-type: brak; } ul li: before {content: "-";} `` `inaczej inaczej wpłynie to również na listy ol

Sasha Bond

5

Oto moje skrzypce wersja :

The (modernizr) Klasa .generatedcontentna <html>praktycznie oznacza IE8 + i każdą inną przeglądarkę sane.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

biziclop
źródło

3

Nie wiem, czy istnieje lepszy sposób, ale możesz utworzyć niestandardową grafikę punktora przedstawiającą myślnik, a następnie poinformować przeglądarkę, że chcesz go użyć na liście za pomocą właściwości list-style-type . Przykład na tej stronie pokazuje, jak używać grafiki jako punktora.

Nigdy nie próbowałem używać: wcześniej, tak jak ty, chociaż może to działać. Minusem jest to, że nie będzie obsługiwany przez niektóre starsze przeglądarki. Moja reakcja brzucha jest taka, że wciąż jest to wystarczająco ważne, aby wziąć to pod uwagę. W przyszłości może to nie być tak ważne.

EDYCJA: Przeprowadziłem małe testy z podejściem PO. W IE8 nie mogłem uruchomić tej techniki, więc na pewno nie jest to jeszcze przeglądarka. Co więcej, w Firefox i Chrome ustawienie w typie listy stylów na none w połączeniu wydaje się być ignorowane.

TNi
źródło

3

Moim rozwiązaniem jest dodanie dodatkowego znacznika zakresu z mdash w nim:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

i dodanie do css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Victor Stagurov
źródło

3

Inny sposób:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

imos
źródło

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

kasztanowiec
źródło

1

nie działa to dla przedmiotów, które obejmują więcej niż jedną linię

jenlampton

2

Zamiast używać lu li, używane dl (definition list) and dd. <dd>można zdefiniować przy użyciu standardowego stylu css, takiego jak {color:blue;font-size:1em;}i użyć jako znacznika dowolnego symbolu umieszczonego po znaczniku html. Działa jak ul li, ale pozwala na użycie dowolnego symbolu, wystarczy go wciąć, aby uzyskać efekt listy wcięć, który zwykle uzyskuje się ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Daje ci znacznie czystszy kod! W ten sposób możesz użyć dowolnego rodzaju postaci jako znacznika! Wcięcie jest o -10pxi działa idealnie!

Carolyne Comtois
źródło

7

Jest to dość złe z dwóch powodów. Po pierwsze, umieszczasz swoje znaki punktorów bezpośrednio w tekście, mieszając zawartość i styl. Po drugie, niewłaściwie używasz elementu dl, oto artykuł o poprawnym użyciu .

mzgajner

1

Dla każdego, kto ma dzisiaj ten problem, rozwiązaniem jest po prostu:

list-style: „-”

Bee Bat
źródło

-1

To, co zadziałało, było dla mnie

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

C oneil
źródło

Łącznik w stylu listy HTML

Odpowiedzi: