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

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

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

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

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

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

Ответы [ 14 ]

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

Этого можно достичь, установив 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 (или другие) элементы в свои списки, что, возможно, более практично (для более позднего расширения и других семантических причин).

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

Я не уверен, что это лучший способ сделать это, но вы можете указать отрицательное 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.)

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

Вы можете попробовать следующее. Но это требует, чтобы вы поместили элемент <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>
20 голосов
/ 15 июля 2012

Я пробовал эти и другие предлагаемые решения, которые на самом деле не работают, но я, кажется, нашел способ сделать это, то есть удалить маркер и использовать псевдоэлемент: before для установки Юникод пуля на своем месте. Затем вы можете настроить расстояние между элементом списка и маркером. Вы должны использовать Unicode, чтобы вставить объект в свойство содержимого: 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 */
       }
6 голосов
/ 04 февраля 2014

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

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

или 

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}
4 голосов
/ 14 марта 2010

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

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

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
4 голосов
/ 14 марта 2010

Вы можете попробовать использовать: 

li {list-style-position: inside; }

Но я не могу вспомнить, регулирует ли это пространство или изменяется там, где встречается . <ч /> 1009 * Отредактированный *

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

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

<ч /> 1024 * Отредактированный *

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

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

Возможно, потребуется более тонкая настройка.

2 голосов
/ 19 августа 2014

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

li {
  text-indent: -4px;
}

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

li {
  margin-left: 24px;
}

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

li {padding-left: -4px; } / * Не работает. * /
2 голосов
/ 25 июля 2012

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

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

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

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

1 голос
/ 06 января 2017

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

Многострочный работает отлично, если вы делаете это таким образом. Пуля будет автоматически соответствовать размеру текста. Отступ прост: это просто 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>
Страница:
...