wake-up-neo.net

HTML-Strich im Listenstil

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

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

Ausgabe:

- abc

Es ist mir in den Sinn gekommen, dies mit etwas wie li:before { content: "-" }; zu tun, obwohl ich die Nachteile dieser Option nicht kenne (und ich wäre sehr dankbar für Feedback).

Generell möchte ich wissen, wie man generische Zeichen für Listenelemente verwendet.

htmlcssxhtmlhtml-lists
191
Brian M. Hunt

Sie könnten :before und content: verwenden, da dies in IE 7 oder darunter nicht unterstützt wird. Wenn Sie damit einverstanden sind, ist dies Ihre beste Lösung. Siehe Kann ich verwenden oder QuirksMode CSS-Kompatibilitätstabellen für vollständige Details.

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 einfach wie einen Strich aussehen zu lassen. Siehe die Seite W3C list-style-image für Beispiele.

96
Darko Z

Es gibt eine einfache Korrektur (Texteinzug), um den Effekt der eingerückten Liste mit der Pseudo-Klasse :before 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

200
aron.lakatos

Benutze das:

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

Hier ist eine Version ohne Position relativ oder absolut 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 ;)

55
velop
ul {
  list-style-type: none;
}

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

demo Geige

25
Keyan Zhang

Lassen Sie mich auch meine Version hinzufügen, meistens, um meine bevorzugte Lösung wieder zu finden:

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>

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

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

In meinem Fall füge ich diesen Code zu CSS hinzu

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

war genug. So einfach es ist.

4
Albert Sosnowski

Hier ist meine Geige Version: 

Die (modernizr) -Klasse .generatedcontent auf <html> bedeutet praktisch IE8 + und jeden anderen gesunden 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;
}
4
biziclop

Meine Lösung ist das Hinzufügen eines zusätzlichen Span-Tags mit mdash:

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

und zu css hinzufügen:

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

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

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

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

Ich habe noch nie versucht, vorher so zu verwenden, 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 dies zu berücksichtigen. In der Zukunft ist dies möglicherweise nicht 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. Außerdem wird in Firefox und Chrome das Festlegen des List-Style-Typs auf none in scheint ignoriert.

2
TNi

Anstelle von lu li wird dl (definition list) and dd verwendet. <dd> kann unter Verwendung eines Standard-CSS-Stils wie {color:blue;font-size:1em;} definiert werden und als Symbol das Symbol verwenden, das Sie nach dem HTML-Tag setzen. Es funktioniert wie ul li, aber Sie können jedes Symbol verwenden. Sie müssen es nur einrücken, um den eingerückten Listeneffekt zu erhalten, den Sie normalerweise mit ul li erhalten.

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 Zeichen als Marker verwenden! Einzug ist etwa -10px und funktioniert einwandfrei!

2
Carolyne Comtois

CSS:

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

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

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
2
blackchestnut

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;    
}
2
imos

Eine der Top-Antworten hat bei mir nicht geklappt, denn nach ein wenig Ausprobieren brauchte das li: before auch die CSS-Regelanzeige: Inline-Block.

Das ist also eine voll funktionierende Antwort für mich:

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

Für jeden, der dieses Problem heute hat, ist die Lösung einfach:

listenstil: "- "

0
Bee Bat