Сокращение разрыва между маркером и текстом в элементе списка - PullRequest
Новая
       53

Сокращение разрыва между маркером и текстом в элементе списка

61 голосов
/ 14 марта 2010

Как можно уменьшить разрыв по умолчанию между маркером и текстом в <li>?

  • Элемент 1
  • Элемент 2
  • Позиция 3

Я хочу уменьшить разрыв между пулей и «Я».

Ответы [ 14 ]

1 голос
/ 25 мая 2015

Вот, пожалуйста, с скрипкой:

FIDDLE

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 голос
/ 16 июля 2014

У меня <a> внутри <li> с.

Для элементов <ul> примените следующий CSS: 

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

Для элементов <a> примените следующий CSS: 

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

Это создает псевдоэлементы для пуль. Они могут быть стилизованы как любые другие элементы.

Я реализовал это здесь: http://www.cssdesk.com/R2AvX

0 голосов
/ 08 июня 2017

Вот еще один способ.

  1. Добавьте два div для каждого li, один для маркера, один для текста.
  2. Поместите символ маркера • (или что вам нравится, в Юникоде достаточно) в элементе bullet. Поместите текст в тексте div.
  3. Установите для каждого li значение display:flex.

Плюсы:

  • Нет дополнительной маркированной картинки для добавления.
  • Нет отрицательных полей или что-либо, не будет выходить за пределы родителя.
  • Работает в любом браузере, поддерживающем flexbox.
  • Правильный отступ многострочных элементов.
  • Использование символа маркера означает, что маркеры всегда будут правильно выровнены по тексту, никаких настроек не требуется.

Минусы:

  • Требуются дополнительные элементы.

Кроме того, если вы не хотите вручную кодировать все дополнительные элементы div, вы можете просто создать обычный список и затем запустить эту функцию, чтобы преобразовать его, передавая ul в качестве параметра: 

function fixList (theList) {
  theList.find('li').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; /* 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>

Вот пример использования функции: 

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 голосов
/ 21 марта 2017

Чтобы добиться нужного мне вида, я сделал div, содержащий базовый UL и несколько LI. Я не мог легко отрегулировать отступ между маркером и текстом с помощью любой из предложенных выше идей (технически возможно, но не просто.) Я просто оставил UL и LI без какой-либо функции листинга (list-style-type: none), а затем добавил &bull; к началу каждой строки. Сначала это доставляло мне немало хлопот, оно отображало только первый маркер, поэтому я добавил символ маркера в конец первой строки, обновил его, затем удалил, и все они всплыли. Просто вручную добавьте маркерный объект HTML, если вы не хотите иметь большой отступ, добавьте пробел HTML-объектов, если вам нужно больше места: o Я знаю, что это не лучший метод, но он работал для меня.

Страница:
...