CSS: kontroluj odstępy między punktorem a <li>

Chciałbym kontrolować, o ile poziomej przestrzeni pocisk przesuwa <li>go w prawo w <ol>lub <ul>.

To znaczy zamiast zawsze mieć

*  Some list text goes
   here.

Chciałbym móc to zmienić

*         Some list text goes
          here.

lub

*Some list text goes
 here.

Rozejrzałem się, ale mogłem tylko znaleźć instrukcje dotyczące przesunięcia całego bloku w lewo lub w prawo, na przykład http://www.alistapart.com/articles/taminglists/

Umieść jego zawartość w pozycji, spanktóra jest względnie ustawiona, wtedy możesz kontrolować przestrzeń za pomocą leftwłaściwości 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>

Podsumowując tutaj inne odpowiedzi - jeśli chcesz mieć lepszą kontrolę nad odstępem między punktorami a tekstem w <li>elemencie listy, masz następujące opcje:

(1) Użyj obrazu tła:

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

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

Zalety:

• Możesz użyć dowolnego obrazu jako punktora
• Możesz użyć CSS, background-positionaby ustawić obraz w dowolnym miejscu w stosunku do tekstu, używając pikseli, ems lub%

Niedogodności:

• Dodaje dodatkowy (choć mały) plik obrazu do twojej strony, zwiększając jej grubość
• Jeśli użytkownik zwiększy rozmiar tekstu w przeglądarce, punktor pozostanie w oryginalnym rozmiarze. Wraz ze wzrostem rozmiaru tekstu najprawdopodobniej przesunie się dalej
• Jeśli opracowujesz „responsywny” układ, używając tylko wartości procentowych dla szerokości, może być trudno ustawić punktor dokładnie tam, gdzie chcesz, w zakresie szerokości ekranu

2. Użyj wypełnienia na <li>tagu

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

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

Zalety:

• Brak obrazu = 1 plik mniej do pobrania
• Dostosowując dopełnienie <li>, możesz dodać tyle dodatkowej poziomej przestrzeni między punktorem a tekstem, ile chcesz
• Jeśli użytkownik zwiększy rozmiar tekstu, odstępy i rozmiar punktorów powinny być skalowane proporcjonalnie

Niedogodności:

• Nie można przesunąć punktora bliżej tekstu niż domyślne ustawienie przeglądarki
• Ograniczone do kształtów i rozmiarów wbudowanych typów punktorów CSS
• Punktor musi być tego samego koloru co tekst
• Brak kontroli nad pionowym ustawieniem pocisku

(3) Zawiń tekst w dodatkowy <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>

Zalety:

• Brak obrazu = 1 plik mniej do pobrania
• Zyskujesz większą kontrolę nad położeniem pocisku niż w przypadku opcji (2) - możesz przesunąć go bliżej tekstu (chociaż pomimo moich najlepszych starań wydaje się, że nie możesz zmienić pozycji w pionie dodając padding-topdo <span>. Ktoś inny mógł mieć aczkolwiek obejście tego problemu ...)
• Punktor może mieć inny kolor niż tekst
• Jeśli użytkownik zwiększy rozmiar tekstu, punktor powinien skalować się proporcjonalnie (pod warunkiem, że ustawisz dopełnienie i margines w ems, a nie w pikselach)

Niedogodności:

• Wymaga dodatkowego niesemantycznego elementu (prawdopodobnie spowoduje to utratę większej liczby przyjaciół na SO niż w prawdziwym życiu;), ale jest to irytujące dla tych, którzy lubią, aby ich kod był tak oszczędny i wydajny, jak to tylko możliwe, i narusza oddzielenie prezentacji od treści który ma oferować HTML / CSS)
• Brak kontroli nad rozmiarem i kształtem pocisku

Mamy nadzieję na nowe funkcje w stylu listy w CSS4, abyśmy mogli tworzyć sprytniejsze pociski bez uciekania się do obrazów lub znaczników exta :)

To powinno wystarczyć. Upewnij się, że pociski są skierowane na zewnątrz. możesz także użyć pseudoelementów CSS, jeśli możesz upuścić je w IE7 w dół. Naprawdę nie polecam używania pseudoelementów do tego rodzaju rzeczy, ale działa to do kontrolowania odległości.

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>

Stare pytanie, ale pseudoelement: before działa tutaj dobrze.

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

Działa naprawdę dobrze i nie wymaga wielu dodatkowych reguł ani html.

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

Twoje zdrowie!

Dla typu listy: inline :

To prawie to samo, co odpowiedź DSMann8, ale mniej kodu CSS.

Po prostu musisz

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

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

Twoje zdrowie

Możesz użyć padding-leftatrybutu na elementach listy ( nie na samej liście!).

Używanie wcięć w tekście na li działa najlepiej.

wcięcie tekstu: -x px; przesunie pocisk bliżej li i odwrotnie.

Korzystanie z wartości względnej na rozpiętości ujemnej lewej strony może nie działać poprawnie ze starszymi wersjami przeglądarki IE. PS - unikaj dawania pozycji tak bardzo, jak możesz.

Oto inne rozwiązanie wykorzystujące licznik css i pseudoelementy. Uważam, że jest bardziej elegancki, ponieważ nie wymaga stosowania dodatkowych znaczników HTML ani klas css:

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
}

Używam nierozrywalnych spacji, aby odstępy wpływały tylko na pierwszy wiersz elementów listy (jeśli element listy jest dłuższy niż jeden wiersz). Zamiast tego możesz użyć dopełnienia.

Stare pytanie, ale nadal aktualne. Polecam używanie negatywu text-indent. list-style-positionmusi być outside.

Plusy:

• Pocisk jest prawidłowo ustawiany automatycznie
• Zmiana rozmiaru czcionki nie powoduje zerwania pozycji punktora
• Bez dodatkowych elementów (no :: pseudoelementy też)
• Działa zarówno dla RTL, jak i LTR bez zmian w CSS.

Cons:

• próbować
• do
• odnaleźć
• jeden :)

Lista nieuporządkowana zaczyna się od znacznika ul. Każda pozycja listy zaczyna się od Pozycje listy będą domyślnie oznaczone punktorami (małymi czarnymi kółkami):

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

Wynik:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

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

</body>
</html>

Właściwość text-indent określa wcięcie pierwszego wiersza w bloku tekstu.
Uwaga: dozwolone są wartości ujemne. Jeśli wartość jest ujemna, pierwsza linia zostanie wcięta w lewo.

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

Wygląda na to, że możesz (w pewnym stopniu) kontrolować odstępy, używając dopełnienia w tagu <li>.

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

Problem polega na tym, że wydaje się, że nie pozwala ci to zgnieść tak dobrze, jak twój ostatni przykład.

W tym celu możesz spróbować wyłączyć typ listy i użyć & bull;

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

Wydaje się, że istnieje znacznie czystsze rozwiązanie, jeśli chcesz tylko zmniejszyć odstępy między punktorem a tekstem:

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

Możesz również użyć zastępowania obrazu tła jako alternatywy, co daje pełną kontrolę nad pozycjonowaniem w pionie i poziomie.

Zobacz odpowiedź na to pytanie

ul
{
list-style-position:inside;
} 

Definicja i użycie

Właściwość list-style-position określa, czy znaczniki elementu listy powinny pojawiać się wewnątrz, czy na zewnątrz przepływu treści.

Źródło: http://www.w3schools.com/cssref/pr_list-style-position.asp

Możesz użyć ul li:beforei obrazu tła oraz przypisać position: relativei odpowiednio position:absolutedo lii li:before. W ten sposób możesz stworzyć obrazek i ustawić go w dowolnym miejscu względem li.

Użyj padding-left:1em; text-indent:-1emjako <li>tagu.
Następnie list-style-position: insidedla <ul>tagu.

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

Poniższe rozwiązanie działa dobrze, gdy chcesz przenieść tekst bliżej punktora, nawet jeśli masz wiele wierszy tekstu.

margin-right umożliwia przeniesienie tekstu bliżej punktora

text-indent zapewnia, że ​​wiele wierszy tekstu nadal jest prawidłowo ułożonych

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>

używać <span style="display: flex;">wewnątrz każdego <li>.