CSS: Kontrollraum zwischen Aufzählungszeichen und <li>


177

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/


Antworten:


161

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>


Zur Verdeutlichung kann das <span> -Tag semantisch sein, wenn ihm eine Klasse zugewiesen wird. Beispielsweise ist <span class = "tel"> 123-456-7890 </ span> implizit semantisch.
Ingyhere

4
+1 für die tatsächliche Beantwortung der Frage des Mannes;) (obwohl die Spanne im wirklichen Leben im Idealfall ohnehin eine Klasse für bewährte Verfahren zur Zukunftssicherheit sowie für die Semantik haben sollte: Wenn in Zukunft Javascript oder die Entwicklung neuer Funktionen usw. einen guten Grund hatten, zusätzliche Spans hinzuzufügen zu Ihrem Inhalt könnten die Dinge chaotisch werden)
user56reinstatemonica8

In Firefox wird die Anzeige nicht richtig angezeigt. Mit diesem Trick überlappt der Text die Kugeln
Jay Bhalodi,

@ingyhere Ich bezweifle nicht, dass dies wahr ist, da ich nichts finden kann, was diese Behauptung beweist. Können Sie Quellen angeben?
WoIIe

@Wolle Hmmm. Es ist ein altes Kommentar, und ich bin nicht sicher , ob die Sorge - Wenn es zu ist , ob <SPAN>nutzen kann idoder classTags, einen Blick auf W3C . Wenn die Frage ist, ob sie semantische Bedeutung vermitteln kann, lesen Sie diese Antwort . Technisch gesehen ist das <SPAN>Tag für sich genommen ein nicht-semantisches Inline-Element, das jedoch in gewisser Weise mehr Flexibilität bei der Wiederverwendung bietet. Heutzutage glaube ich, dass man den inline-blockDeskriptor verwenden kann, um eine viel größere Auswahl an Formatierungsoptionen zu ermöglichen.
Ingyhere

120

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


4
Gute Antwort. Damit # 2 funktioniert, müssen Sie Ihre Position im Listenstil beibehalten outside.
Tom Auger

Das span-Element ist die Lösung für mich. Ich habe diese Antwort nur gegeben, weil ich die negative Marge der negativen absoluten Positionierung vorgezogen habe - ohne guten Grund.
FlipMcF

Wenn Sie Text haben, der Zeilen umschließt, musste ich display: block;das span-Element hinzufügen , damit auch der umgebrochene Text ausgerichtet wird (ich habe auch Ankertags anstelle von span verwendet)
Kevin M

Die Verwendung von Hintergrundbildern für alles, was nicht nur das ist, ist fast immer eine sehr schlechte Idee. Sie können nicht gespeichert werden, werden nicht gedruckt und von Screenreadern nicht erwähnt. Die Verwendung von <span> ist die eleganteste Methode, um dieses Problem zu lösen. Polster funktionieren nicht, da sie auch die Position der Kugeln ändern.
Bachsau

3
Ich würde NIEMALS ein Hintergrundbild dafür verwenden. Sie können immer das Element: before mit dem Inhalt verwenden: "•"; Anschließend verwenden Sie die Auffüllung und die absolute Position des Vor-Elements, um es zu steuern.
Yann Chabot

37

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>


5
Ich kann nicht glauben, dass diese Antwort nicht akzeptiert wird. Es ist 100% CSS, es fügt kein überflüssiges <span> -Element hinzu und es hat mich endlich verstehen lassen, warum es eine Innen / Außen-Option gibt! (und es ist die akzeptierte Antwort auf die erwähnte doppelte Frage ...)
MindTailor

1
Durch Verwenden list-style-position: outsideund Auffüllen der LIElemente können Sie den Abstand zwischen den Aufzählungspunkten vergrößern, aber es funktioniert immer noch nicht umgekehrt über einen vom Browser angegebenen Versatz hinaus. Siehe diesen JS Bin .
Mesagoma

4
Nachtrag: Verwenden Sie in modernen Browsern (IE9 +, FF, Chrome usw.) ein Negativ text-indentauf dem <UL>oder <LI>, um den vom Browser erzwungenen Abstand zwischen Aufzählungspunkt und <LI>Inhalt zu negieren . Das heißt, erhöhen Sie padding-leftwie oben gezeigt, um den Abstand zu vergrößern, und verringern Sie text-indent, um den Abstand zwischen dem Aufzählungspunkt und dem Inhalt wie gewünscht zu verringern.
Mesagoma

1
Leider werden bei allen oben genannten Desktop-Browsern, wenn der Inhalt eines <LI>in eine zweite Zeile eingeschlossen wird, solche nachfolgenden Zeilen basierend auf dem Rand / Abstand / Einzug, den wir für die erste Zeile über rückgängig gemacht haben, erneut eingerückt text-indent. Sigh
Mesagoma

Eine andere Möglichkeit besteht darin, die Pseudo-Elemente: before zu verwenden und den Inhalt auf einen beliebigen Wert einzustellen. von dort positionieren Sie die Pseudoelemente wie gewünscht.
Kevin

14

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!


3
Schöne und einfache Antwort. Ich würde hinzufügen, dass diese Einstellung margin-left: -5px(oder welcher Wert auch immer) den Abstand zwischen dem Aufzählungszeichen und dem <li>Element
verringern wird

2
Hinweis: Dies unterstützt keine hängenden Einrückungen
Eric

Tolle Antwort, das hat perfekt mit minimalem Arbeitsaufwand funktioniert! Vielen Dank!
KyleFarris

12

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


Das funktioniert list-style-position: insideauch, was großartig ist!
Matt Dodge

11

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


5
Bitte beachten Sie, dass dies nur funktioniert, wenn list-style-positionder Standardwert eingestellt ist outside.
August

Dies sollte die akzeptierte Antwort sein, zumindest für den normalen Gebrauch. Es wird vermieden, ein <span>Element nur für Entwurfszwecke zu verwenden.
Eukras

7

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.


Dies verhält sich in Chrome seltsam. Schnappt bei -5px auf wenig Platz;
Ian Warburton

7

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.


7

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

2
Ich habe versucht, diese Methode zu verwenden, aber der Einzug funktioniert bei Zeilenumbrüchen nicht. Texteinzug wird nur die erste Zeile einrücken.
Matt

6

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>

Vielen Dank für die Antwort. Bitte versuchen Sie jedoch, Ihre Lösungen zu kommentieren, um das Verständnis anderer zu erleichtern.
Domination

Dies ist die beste Antwort und sollte akzeptiert werden. Minimum CSS!
KawaiKx

5

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>

5

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

4

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

Siehe die Antwort auf diese Frage



0

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.


0

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>

0

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>

Geben Sie hier die Bildbeschreibung ein


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.