CSS: Kontrollraum zwischen Aufzählungszeichen und <li>

Ich möchte steuern, wie viel horizontaler Raum eine Kugel <li>in einem <ol>oder nach rechts drückt <ul>.

Das heißt, anstatt immer zu haben

*  Some list text goes
   here.

Ich würde das gerne ändern können

*         Some list text goes
          here.

oder

*Some list text goes
 here.

Ich sah mich um, konnte aber nur Anweisungen zum Verschieben des gesamten Blocks nach links oder rechts finden, z. B. http://www.alistapart.com/articles/taminglists/

spanStellen Sie den Inhalt in eine Position, die relativ positioniert ist, und steuern Sie den Raum anhand der leftEigenschaft von span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

Um die anderen Antworten hier zusammenzufassen: Wenn Sie den Abstand zwischen Aufzählungszeichen und dem Text in einem <li>Listenelement genauer steuern möchten , haben Sie folgende Möglichkeiten:

(1) Verwenden Sie ein Hintergrundbild:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Vorteile:

• Sie können jedes gewünschte Bild für die Kugel verwenden
• Sie können CSS verwenden, background-positionum das Bild praktisch überall in Bezug auf den Text zu positionieren, indem Sie Pixel, Ems oder% verwenden

Nachteile:

• Fügt Ihrer Seite eine zusätzliche (wenn auch kleine) Bilddatei hinzu, wodurch das Seitengewicht erhöht wird
• Wenn ein Benutzer die Textgröße in seinem Browser erhöht, bleibt das Aufzählungszeichen in der ursprünglichen Größe. Es wird wahrscheinlich auch weiter aus der Position geraten, wenn die Textgröße zunimmt
• Wenn Sie ein "responsives" Layout entwickeln, das nur Prozentsätze für Breiten verwendet, kann es schwierig sein, das Aufzählungszeichen über einen Bereich von Bildschirmbreiten genau dort zu platzieren, wo Sie es möchten

2. Verwenden Sie Polsterung für das <li>Tag

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Vorteile:

• Kein Bild = 1 Datei weniger zum Herunterladen
• Durch Anpassen der Polsterung auf <li>können Sie so viel zusätzlichen horizontalen Abstand zwischen dem Aufzählungszeichen und dem Text hinzufügen, wie Sie möchten
• Wenn der Benutzer die Textgröße erhöht, sollten der Abstand und die Aufzählungsgröße proportional skaliert werden

Nachteile:

• Die Kugel kann nicht näher an den Text herangeführt werden als die Standardeinstellung des Browsers
• Beschränkt auf Formen und Größen der in CSS integrierten Aufzählungszeichen
• Das Aufzählungszeichen muss dieselbe Farbe wie der Text haben
• Keine Kontrolle über die vertikale Positionierung des Geschosses

(3) Wickeln Sie den Text in ein zusätzliches <span>Element

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Vorteile:

• Kein Bild = 1 Datei weniger zum Herunterladen
• Sie erhalten mehr Kontrolle über die Position der Kugel als mit der Option (2) - Sie können es näher an den Text (auch wenn trotz all meiner Bemühungen es scheint , dass Sie die vertikale Position durch Zugabe nicht ändern kann , padding-topum die <span>jemand anderes haben. eine Problemumgehung dafür ...)
• Das Aufzählungszeichen kann eine andere Farbe als der Text haben
• Wenn der Benutzer seine Textgröße erhöht, sollte das Aufzählungszeichen proportional skaliert werden (vorausgesetzt, Sie legen den Abstand und den Rand in ems und nicht in px fest).

Nachteile:

• Benötigt ein zusätzliches unsemantisches Element (dies wird wahrscheinlich mehr Freunde auf SO verlieren als im wirklichen Leben;), aber es ist ärgerlich für diejenigen, die ihren Code so schlank und effizient wie möglich mögen, und es verletzt die Trennung von Präsentation und Inhalt das HTML / CSS bieten soll)
• Keine Kontrolle über die Größe und Form der Kugel

Wir hoffen auf einige neue Funktionen im Listenstil in CSS4, damit wir intelligentere Aufzählungszeichen erstellen können, ohne auf Bilder oder Exta-Markups zurückgreifen zu müssen :)

Das sollte es tun. Stellen Sie sicher, dass Ihre Kugeln nach außen gerichtet sind. Sie können auch CSS-Pseudoelemente verwenden, wenn Sie sie in IE7 nach unten ablegen können. Ich empfehle nicht wirklich, Pseudo-Elemente für diese Art von Dingen zu verwenden, aber es funktioniert, um die Entfernung zu kontrollieren.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Alte Frage, aber das: Vorher-Pseudo-Element funktioniert hier gut.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Es funktioniert sehr gut und erfordert nicht viele zusätzliche Regeln oder HTML.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Prost!

Für Listenstil: Inline :

Es ist fast das gleiche wie die Antwort von DSMann8, aber weniger CSS-Code.

Du musst nur

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Prost

Sie können das padding-leftAttribut für die Listenelemente verwenden ( nicht für die Liste selbst!).

Die Verwendung von Text-Einzug auf li funktioniert am besten.

Texteinzug: -x px; bewegt die Kugel näher an li und umgekehrt.

Bei Verwendung von Relative On Span funktioniert die negative Linke möglicherweise nicht ordnungsgemäß mit älteren Versionen für IE. PS: Vermeiden Sie es, so viele Positionen wie möglich zu vergeben.

Hier ist eine andere Lösung mit CSS-Zähler und Pseudoelementen. Ich finde es eleganter, da weder zusätzliches HTML-Markup noch CSS-Klassen erforderlich sind:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Ich verwende nicht unterbrechbare Leerzeichen, sodass der Abstand nur die erste Zeile meiner Listenelemente betrifft (wenn das Listenelement mehr als eine Zeile lang ist). Sie können hier stattdessen Polster verwenden.

Alte Frage aber immer noch relevant. Ich empfehle die Verwendung von Negativ text-indent. list-style-positionmuss sein outside.

Vorteile:

• Die Kugel wird automatisch richtig positioniert
• Durch Ändern der Schriftgröße wird die Position des Aufzählungszeichens nicht unterbrochen
• Keine zusätzlichen Elemente (auch keine :: Pseudoelemente)
• Funktioniert sowohl für RTL als auch für LTR ohne Änderung des CSS.

Nachteile:

• Versuchen
• zu
• finden
• einer :)

Eine ungeordnete Liste beginnt mit dem Tag ul. Jedes Listenelement beginnt mit dem Die Listenelemente werden standardmäßig mit Aufzählungszeichen (kleinen schwarzen Kreisen) markiert:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Ausgabe:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Die Eigenschaft text-indent gibt den Einzug der ersten Zeile in einem Textblock an.
Hinweis: Negative Werte sind zulässig. Die erste Zeile wird nach links eingerückt, wenn der Wert negativ ist.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Es scheint, dass Sie den Abstand (etwas) durch Auffüllen des <li> -Tags steuern können.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Der Haken ist, dass es Ihnen nicht zu erlauben scheint, es so eng wie Ihr letztes Beispiel zu zerkleinern.

Dazu können Sie versuchen, den Listentyp zu deaktivieren und & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Es scheint eine viel sauberere Lösung zu geben, wenn Sie nur den Abstand zwischen dem Aufzählungspunkt und dem Text verringern möchten:

li:before {
    content: "";
    margin-left: -0.5rem;
}

Alternativ können Sie auch einen Hintergrundbildersatz verwenden, um die vertikale und horizontale Positionierung vollständig zu steuern.

Siehe die Antwort auf diese Frage

ul
{
list-style-position:inside;
} 

Definition und Verwendung

Die Eigenschaft list-style-position gibt an, ob die Listenelementmarkierungen innerhalb oder außerhalb des Inhaltsflusses angezeigt werden sollen.

Quelle: http://www.w3schools.com/cssref/pr_list-style-position.asp

Sie können verwendet werden ul li:beforeund ein Hintergrundbild und zuweisen position: relativeund position:absolutean den liund li:beforedargestellt. Auf diese Weise können Sie ein Bild erstellen und es relativ zum Li positionieren, wo immer Sie möchten.

Verwenden Sie padding-left:1em; text-indent:-1emfür das <li>Tag.
Dann list-style-position: insidefür das <ul>Tag.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

Die folgende Lösung funktioniert gut, wenn Sie den Text näher an das Aufzählungszeichen verschieben möchten und selbst wenn Sie mehrere Textzeilen haben.

margin-right Mit dieser Option können Sie den Text näher an das Aufzählungszeichen verschieben

text-indent stellt sicher, dass mehrere Textzeilen immer noch korrekt ausgerichtet sind

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

Verwenden <span style="display: flex;">innerhalb jedes <li>.