Strich vom Typ HTML-Listenstil

222

Gibt es eine Möglichkeit, einen Listenstil in HTML mit einem Bindestrich (dh - oder - –oder - —) zu erstellen?

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

Ausgabe:

- abc

Mir ist der Gedanke gekommen, dies mit so etwas zu tun li:before { content: "-" };, obwohl ich die Nachteile dieser Option nicht kenne (und für Feedback sehr dankbar wäre).

Allgemeiner würde es mir nichts ausmachen zu wissen, wie man generische Zeichen für Listenelemente verwendet.

html  css  xhtml  html-lists 
— Brian M. Hunt
quelle
79
Da Bindestrich häufig in Listen verwendet wird, warum ist er nicht standardmäßig in CSS enthalten?
— Temirbek
101
Noch wichtiger ist, warum gibt es armenische Nummerierung und Katakana ... aber keine Bindestriche?
— Henry C

Antworten:

108

Sie können verwenden :beforeund content:bedenken, dass dies in IE 7 oder niedriger nicht unterstützt wird. Wenn Sie damit einverstanden sind, ist dies Ihre beste Lösung. Sehen Sie sich die Kann ich oder Quirksmode CSS - Kompatibilität Tabellen für weitere Informationen.

Eine etwas unangenehmere Lösung, die in älteren Browsern funktionieren sollte, besteht darin, ein Bild für den Aufzählungspunkt zu verwenden und das Bild nur wie einen Bindestrich aussehen zu lassen. Beispiele finden Sie auf der W3C- list-style-imageSeite .

— Darko Z.
quelle
27
Das Problem dabei :beforeist, dass, wenn sich die Listenelemente über mehrere Zeilen erstrecken, der Einzug in der 2. Zeile dort beginnt, wo sich der Bindestrich befindet, wodurch der eingerückte Listeneffekt ruiniert wird. Sie müssen hängende Vertiefungen verwenden, um dies zu vermeiden. Siehe dies: alistapart.com/articles/taminglists
— Chiborg
3
Um mdash in contentGebrauch zu setzencontent: "\2014\a0"
— Ivan Z
Siehe die Antwort von @three, die allgemeiner und weniger ausführlich ist!
— Ben Vertonghen
221

Es gibt eine einfache Lösung (Text-Einzug), um den eingerückten Listeneffekt mit der :beforePseudoklasse beizubehalten.

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
Erweitern Sie das Snippet

— aron.lakatos
quelle
14
Funktioniert, aber vergessen Sie nicht list-style-type: none;, das <ul>Element zu setzen.
— Toesslab
5
ohne Einrückung nurul li:before{ content:"- ";}
— Qlimax
4
Ich ziehe es vor, display: block; float: left;zu dem hinzuzufügen , li:beforewas es leichter aus dem Inhaltsfluss herausziehen kann, sonst ist es ziemlich schwierig / fehlerhaft, die ersten und nachfolgenden Zeilen richtig auszurichten. Oder Keyan Zhangs Antwort tut dies auch mit absoluter Positionierung.
— Simon East
8
ziemlich dumm, das list-style-type dashist noch nicht Teil von CSS
— Pixelomo
Was wäre eine reine HTML-Lösung ähnlich der von Ihnen vorgeschlagenen?
— Pluton
74

Hier ist eine Version ohne relative oder absolute Position und ohne Texteinzug:

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

Genießen ;)

— velop
quelle
1
großartig! Ich würde vorschlagen 'ul.dash> li: before'. Andernfalls werden die inneren Probleme durcheinander gebracht.
— w.stoettinger
1
Ich ziehe es vor, display: block; float: left;zu dem hinzuzufügen , li:beforewas es leichter aus dem Inhaltsfluss herausziehen kann, sonst ist es ziemlich schwierig / fehlerhaft, die ersten und nachfolgenden Zeilen richtig auszurichten. Oder Keyan Zhangs Antwort tut dies auch mit absoluter Positionierung.
— Simon East
Ich benutze dies als Navigationsklasse .activemit li:before { visibility: hidden; }undli.active:before { visibility: visible; }
— sshow
Bester Vorschlag imo!
— Ben Vertonghen
64

Benutze das:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
— Jase
quelle
3
Leider werden die Farben des CSS-Textes nicht respektiert.
— Hereblur
7
Die einzig mögliche Lösung für E-Mails
— Oleg
Es funktioniert jetzt nicht für Google Mail (November 2018) und Outlook 2016.
— user2875289
33 
ul {
  list-style-type: none;
}

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

Demo Geige

— Keyan Zhang
quelle
25

Lassen Sie mich auch meine Version hinzufügen, hauptsächlich, damit ich wieder meine bevorzugte Lösung finde:

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>
Erweitern Sie das Snippet

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

— drei
quelle
IMHO ist es die beste Lösung bisher. Danke fürs Teilen!
— Axel
14

In meinem Fall Hinzufügen dieses Codes zu CSS

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

war genug. Einfach wie es ist.

— Albert Sosnowski
quelle
1
Angenommen, dies ist eine relativ neue Ergänzung zu CSS, da ich keine andere Antwort finden kann, die dies erwähnt, aber dies sollte heutzutage wirklich die akzeptierte Antwort sein.
— ahstro
4
Dies scheint nur in Desktop Firefox unterstützt zu werden: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
— Dave
Dies wird jetzt auch in Chrome unterstützt (Stand 79, glaube ich): chromestatus.com/feature/5893875400966144 und caniuse.com/#feat=mdn-css_properties_list-style-type_string
— Alex
9

Eine der Top-Antworten hat bei mir nicht funktioniert, da das li: before nach ein wenig Versuch und Irrtum auch die Anzeige der CSS-Regel: Inline-Block benötigte.

Das ist also eine voll funktionsfähige Antwort für mich:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}
— Joery
quelle
Dies ist in LESS / SASS geschrieben.
— Arslan Ameer
7 
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
— user3849374
quelle
wahrscheinlich `` `ul {margin: 0; Listenstil-Typ: keine; } ul li: before {content: "-";} `` `sonst betrifft es auch alte Listen
— Sasha Bond
5

Hier ist meine Geigenversion :

Die (modernizr) Klasse .generatedcontentauf <html>bedeutet praktisch IE8 + und jeden anderen vernünftigen Browser.

<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
quelle
3

Ich weiß nicht, ob es einen besseren Weg gibt, aber Sie können eine benutzerdefinierte Aufzählungspunktgrafik erstellen, die einen Bindestrich darstellt, und dann dem Browser mitteilen, dass Sie ihn in Ihrer Liste mit der Eigenschaft list-style-type verwenden möchten . Ein Beispiel auf dieser Seite zeigt, wie eine Grafik als Aufzählungszeichen verwendet wird.

Ich habe noch nie versucht zu verwenden: vorher so, wie Sie es getan haben, obwohl es funktionieren kann. Der Nachteil ist, dass es von einigen älteren Browsern nicht unterstützt wird. Meine Bauchreaktion ist, dass dies immer noch wichtig genug ist, um es zu berücksichtigen. In Zukunft ist dies möglicherweise nicht mehr so ​​wichtig.

EDIT: Ich habe ein wenig mit dem Ansatz des OP getestet. In IE8 konnte ich die Technik nicht zum Laufen bringen, daher ist sie definitiv noch nicht browserübergreifend. Darüber hinaus wird in Firefox und Chrome die Einstellung "Listenstil" auf "Keine" in Verbindung ignoriert.

— TNi
quelle
3

Meine Lösung besteht darin, ein zusätzliches span-Tag mit mdash hinzuzufügen:

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

und Hinzufügen zu 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
quelle
3

Ein anderer Weg:

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
quelle
3

CSS:

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

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

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
— Schwarzkastanie
quelle
1
Dies funktioniert nicht für Elemente, die mehr als eine Zeile umfassen
— Jenlampton
2

Anstatt lu li zu verwenden, verwendet dl (definition list) and dd. <dd>kann mit dem Standard-CSS-Stil definiert werden, z. B. {color:blue;font-size:1em;}und als Markierung für jedes Symbol, das Sie nach dem HTML-Tag platzieren. Es funktioniert wie ul li, ermöglicht jedoch die Verwendung eines beliebigen Symbols. Sie müssen es nur einrücken, um den normalerweise eingerückten Listeneffekt zu erzielen ul li.

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

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

Gibt Ihnen viel saubereren Code! Auf diese Weise können Sie jede Art von Charakter als Marker verwenden! Einzug ist ungefähr -10pxund es funktioniert perfekt!

— Carolyne Comtois
quelle
7
Das ist aus zwei Gründen ziemlich schlecht. Erstens fügen Sie Ihre Aufzählungszeichen direkt in den Text ein und mischen Inhalt und Stil. Zweitens missbrauchen Sie das dl-Element. Hier ist ein Artikel über die korrekte Verwendung .
— Mzgajner
-1

Was für mich funktioniert hat war 

<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
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.