it-swarm.dev

Verringerung der Lücke zwischen einem Aufzählungszeichen und Text in einem Listenelement

Wie kann ich die Standardlücke zwischen Aufzählungszeichen und Text in einem <li> Verringern?

  • Gegenstand 1
  • Punkt 2
  • Punkt 3

Ich möchte die Lücke zwischen der Kugel und "Ich" verringern.

61
Jitendra Vyas

Ich bin nicht sicher, ob dies der beste Weg ist, aber Sie können ein negatives text-indent :

li {
    text-indent: -4px;
}

... wo Ihr HTML-Code aussieht:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

(Getestet in Safari 4.0.4 und Firefox 3.0.11.)

31
Steve Harrison

Sie können dies erreichen, indem Sie list-style-type zu none und Einstellen des background-image eines Listenelements zu einem generischen Aufzählungszeichen, wie folgt:

ul {
    list-style-type: none;
}

li {
    background-image: url(bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 7px;
}

Das Ergebnis würde ungefähr so ​​aussehen:

alt text

Mit diesem Ansatz fügen Sie nicht unnötige span (oder andere) Elemente zu Ihren Listen hinzu, was möglicherweise praktischer ist (aus späteren Gründen der Erweiterbarkeit und aus anderen semantischen Gründen).

30
gpmcadam

Sie könnten Folgendes versuchen. Sie müssen jedoch ein <span> - Element in die <li> - Elemente einfügen

<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;

}
</style>
</head>

<body>

<ul class="a">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Coca Cola</span></li>
</ul>
</body>
</html>
21
Jaime Garcia

Ich habe diese und andere angebotene Lösungen ausprobiert, die eigentlich nicht funktionieren, aber ich habe anscheinend einen Weg gefunden, dies zu tun, und zwar das Entfernen des Aufzählungszeichens und Verwenden des: before-Pseudoelements, um ein Unicode-Aufzählungszeichen einzufügen seinen Platz. Anschließend können Sie den Abstand zwischen Listenelement und Aufzählungszeichen anpassen. Sie müssen Unicode verwenden, um eine Entität in die content-Eigenschaft von: before oder: after einzufügen - HTML-Entitäten funktionieren nicht.

Außerdem sind einige Größen- und Positionierungscodes erforderlich, da das Unicode-Aufzählungszeichen standardmäßig die Größe einer Stecknadel anzeigt. Die Kugel muss also vergrößert und absolut positioniert werden, damit sie in Position gebracht werden kann. Beachten Sie die Verwendung von ems für die Größe und Positionierung des Aufzählungszeichens, damit die Beziehung des Aufzählungszeichens zum Listenelement konstant bleibt, wenn Sie die Schriftgröße des Listenelements ändern. Die Kommentare im Code erklären, wie alles funktioniert. Wenn Sie eine andere Entität verwenden möchten, finden Sie hier eine Liste der Unicode-Entitäten:

http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Verwenden Sie einen Wert aus der äußersten rechten Spalte (Oktal) der Tabelle auf dieser Seite - Sie brauchen nur die Zeichen\und die Nummer. Sie sollten in der Lage sein, alle Elemente mit Ausnahme der content -Eigenschaft aus der: before -Regel in den Papierkorb zu verschieben, wenn Sie die anderen Entitäten verwenden, da sie anscheinend in einer verwendbaren Größe angezeigt werden. Schicken Sie mir eine E-Mail: charles at stylinwithcss dot com mit Ihren Gedanken/Kommentaren. Ich habe es mit Firefox, Chrome und Safari getestet und es funktioniert gut.

    body {
      font-family:"Trebuchet MS", sans-serif;
      }
    li  {
      font-size:14px;        /* set font size of list item and bullet here */
      list-style-type:none; /* removes default bullet */
      position:relative;      /* positioning context for bullet */
      }
      li:before  {
        content:"\2219";    /* escaped unicode character */
        font-size:2.5em;    /* the default unicode bullet size is very small */
        line-height:0;        /* kills huge line height on resized bullet */
        position:absolute;  /* position bullet relative to list item */
        top:.23em;           /* vertical align bullet position relative to list item */
        left:-.5em;            /* position the bullet L- R relative to list item */
       }
20

Wenn Sie in jedem Li nur eine Textzeile haben, können Sie den Text in Li einrücken. So was :

ul {
  list-style: disc;
}
ul li {
   text-indent: 5px;
}

oder

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}
6
Bogdana Zadic

Das ist eine Möglichkeit.

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
4
mark123

Ich musste dies inline tun und einige der oben genannten kombinieren, damit es für mich richtig funktioniert. Ich arbeite in einem Div und wollte ein Bild verwenden:

Das Auffüllen unter dem UL teilte der Kugel mit, wo am linken Rand des Divs begonnen werden soll. Ich benutze em für eine bessere Zugänglichkeit/Flexibilität, aber Sie könnten auch px verwenden. Wenn es mit px nicht viel zu bewegen scheint, verwenden Sie einen viel größeren px-Wert (für mich war das Verschieben in cm 60px!).

Der Texteinzug gibt dem Aufzählungszeichen an, wie nah der Text ist, neben dem er sich befindet.

Ich hoffe, es funktioniert für Sie! :)

2
libellus

Reduziere text-indent auf eine negative Zahl, um den Abstand zwischen dem Aufzählungszeichen des Listenelements und seinem Text zu verringern.

li {
  text-indent: -4px;
}

Sie können auch margin-left, um den Abstand zwischen dem Aufzählungszeichen des Listenelements und dem Rand des umgebenden Elements anzupassen.

li {
  margin-left: 24px;
}

Beide text-indent und padding-left can add Leerzeichen zwischen Aufzählungszeichen und Text, aber nur text-indent kann das Leerzeichen auf negativ reduzieren.

li {links auffüllen: -4px; }/* Funktioniert nicht. * /
2
jtheletter

Hier ist, wie es geht.

Multi-Line funktioniert perfekt, wenn Sie es auf diese Weise tun. Die Größe des Aufzählungszeichens wird automatisch mit dem Text angepasst. Einzug ist einfach: Es ist nur die padding-left auf dem li. Minimales CSS erforderlich.

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > li {
  position: relative;
  padding-left: 12px;
}
ul > li:before {
  content: "•";
  position: absolute;
  left: 0;
}
div {
  border: 1px solid #ccc;
}
<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
    <li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
    <li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
  </ul>
</div>
1
mpen

Ich habe <a> im <li>s.

Zum <ul> -Elemente wenden das folgende CSS an:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Zum <a> -Elemente wenden das folgende CSS an:

a:before {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

Dies erzeugt Pseudoelemente für die Aufzählungszeichen. Sie können wie alle anderen Elemente gestaltet werden.

Ich habe es hier implementiert: http://www.cssdesk.com/R2AvX

1
Hitesh

Hier gehts mit Fiddle:

GEIGE

HTML:

<ol>
        <li>List 1          
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 2
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 3</li>
</ol>

CSS:

ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
1
Reddy

Hier ist noch ein anderer Weg.

  1. Fügen Sie zwei Divs zu jedem Li hinzu, eines für die Kugel und eines für den Text.
  2. Setze ein Aufzählungszeichen (oder was auch immer Sie mögen, Unicode hat viel) in der Aufzählung div. Setzen Sie den Text in das Textfeld ein.
  3. Setze jedes li auf display:flex.

Vorteile:

  • Kein zusätzliches Aufzählungszeichen zum Hinzufügen.
  • Keine negativen Ränder oder irgendetwas, werden nicht außerhalb der Eltern gehen.
  • Funktioniert mit jedem Browser, der Flexbox unterstützt.
  • Richtige Einrückung von mehrzeiligen Elementen.
  • Die Verwendung von Aufzählungszeichen bedeutet, dass die Aufzählungszeichen immer richtig vertikal mit dem Text ausgerichtet sind und keine Änderungen erforderlich sind.

Nachteile:

  • Benötigt zusätzliche Elemente.

Wenn Sie nicht alle zusätzlichen Divs codieren möchten, können Sie einfach eine normale Liste erstellen und diese Funktion ausführen, um sie zu transformieren. Dabei wird ul als Parameter übergeben:

function fixList (theList) {
  theList.find('li').each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

Beispiel:

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex; /* set to desired spacing */
}
<ul>
  <li><div>•</div><div>First list item.</div>
  <li><div>•</div><div>Second list item.<br>It's on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>

Hier ist ein Beispiel mit der Funktion:

fixList($('ul'));

function fixList (theList) {
  $('li', theList).each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}
li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>
0
Jason C

Um den gewünschten Look zu erzielen, habe ich ein Div erstellt, das ein Basis-UL und mehrere LIs enthält. Ich konnte den Einzug zwischen Aufzählungszeichen und Text mit den oben genannten Vorschlägen nicht leicht anpassen (technisch möglich, aber nicht einfach). Ich habe nur UL und LI ohne Auflistungsfunktion verlassen (list-style-type: none) dann Hinzufügen eines &bull; an den Anfang jeder Zeile. Anfangs gab es ein bisschen Ärger, es wurde nur der erste Aufzählungspunkt angezeigt, also habe ich ein Aufzählungszeichen am Ende der ersten Zeile hinzugefügt, aktualisiert, dann entfernt und alle sind aufgetaucht. Fügen Sie einfach manuell eine Aufzählungs-HTML-Entität hinzu, wenn Sie keinen großen Einzug wünschen, und fügen Sie Leerzeichen-HTML-Entitäten hinzu, wenn Sie mehr Leerzeichen wünschen: o Ich weiß, dass dies nicht die beste Methode ist, aber sie hat bei mir funktioniert.

0
Keiome