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

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

  • Пункт 1
  • Пункт 2
  • Пункт 3

Я хочу уменьшить разрыв между пулями и I

ОТВЕТЫ

Ответ 1

Вы могли бы достичь этого, установив list-style-type в none и установив background-image элемента списка в общую пулю, например:

ul {
    list-style-type: none;
}

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

Результат будет выглядеть примерно так:

alt text

При таком подходе вы не добавляете ненужные элементы span (или другие) в свои списки, что, возможно, более практично (для более поздней расширяемости и других смысловых причин).

Ответ 2

Я не уверен, что это лучший способ сделать это, но вы можете указать отрицательный text-indent:

li {
    text-indent: -4px;
}

... где ваш HTML-код выглядит следующим образом:

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

(Протестировано в Safari 4.0.4 и Firefox 3.0.11.)

Ответ 3

Вы можете попробовать следующее. Но для этого нужно добавить элемент <span> внутри элементов <li>

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

Ответ 4

Я пробовал эти и другие предлагаемые решения, которые на самом деле не работают, но я, похоже, нашел способ сделать это, и это нужно удалить пулю и использовать: перед псевдоэлементом, чтобы поставить Юникодная пуля на своем месте. Затем вы можете отрегулировать пространство между элементом списка и маркером. Вы должны использовать Unicode для вставки объекта в свойство content: before или: after - объекты HTML не работают.

Там также нужен некоторый код калибровки и позиционирования, потому что марка Unicode по умолчанию отображает размер булавочной головки. Таким образом, пуля должна быть увеличена и абсолютно позиционирована, чтобы получить ее на место. Обратите внимание на использование ems для калибровки и позиционирования пули, так что отношение пули к элементу списка остается постоянным, когда вы изменяете размер шрифта элемента списка. Комментарии в коде объясняют, как все это работает. Если вы хотите использовать другой объект, вы можете найти здесь список объектов Unicode:

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

Используйте значение из дальнего правого столбца (восьмеричное) из таблицы на этой странице - вам просто нужны\и номер. Вы должны иметь возможность удалять все, кроме свойства содержимого, из правила: before при использовании других объектов, поскольку они, по-видимому, отображаются с возможностью использования. Напишите мне: charles at stylinwithcss dot com с любыми мыслями/комментариями. Я тестировал его Firefox, Chrome и Safari, и он отлично работает.

    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 */
       }

Ответ 5

Если в каждом ли у вас есть только одна строка текста, вы можете наложить текстовый отступ на li. Вот так:

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

или

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

Ответ 6

Это один из способов.

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

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

Ответ 7

Вы можете попробовать:

li {list-style-position: inside; }

Но я не могу вспомнить, настраивает ли это пространство или меняет место пробела.

Edited

Вышеизложенное не имеет существенного отличия. Кажется, что нет никакого способа уменьшить пространство между марке list-style-type и текстом, хотя его можно увеличить с помощью margin-left или text-indent.

Извините, я не могу быть более полезным.

Edited

Просто из любопытства, как насчет "фальсификации" пули с фоновым изображением?

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

ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
       margin: 0;
       padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}

Это может позволить более тонкую настройку.

Ответ 8

Мне нужно было сделать это inline и объединить несколько из вышеперечисленных, чтобы он работал правильно для меня. Я работаю внутри div и хочу использовать изображение:

Прокладка под UL сообщила пуле, где начинаться с левого поля div. Я использую em для лучшей доступности/гибкости, но вы также можете использовать px. Если он не сильно перемещается с px, используйте гораздо большее значение px (для меня просто перемещение в cm было 60px!).

Текст-отступ указывает пуле, как близко, чтобы добраться до текста, который он рядом.

Надеюсь, это сработает для вас!:)

Ответ 9

Уменьшите text-indent до отрицательного числа, чтобы уменьшить пробел между маркером списка и его текстом.

li {
  text-indent: -4px;
}

Вы также можете использовать margin-left, чтобы отрегулировать любое пространство между пулем элемента списка и краем его окружающего элемента.

li {
  margin-left: 24px;
}

Оба text-indent и padding-left могут добавлять пробел между маркером и текстом, но только text-indent может уменьшить пробел до отрицательного.

  li {padding-left: -4px; }/* Не работает. */

Ответ 10

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

В элементы <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

Ответ 11

Здесь вы идете с скриптом:

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

Ответ 12

Вот как это сделать.

Multi-line отлично работает, если вы так делаете. Bullet автоматически будет иметь размер с текстом. Отступ прямой: это только padding-left на li. Требуется минимальный CSS.

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>

Ответ 13

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

Ответ 14

Здесь еще один способ.

  • Добавьте два div для каждого li, один для пули, один для текста.
  • Поместите символ пули • (или все, что вам нравится, Unicode имеет много) в div bullet. Поместите текст в текст div.
  • Задайте для каждого 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 on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>