CSS: контрольное пространство между пулями и <li>

Я хотел бы контролировать, сколько горизонтального пространства пуля подталкивает его <li> вправо в <ol> или <ul>.

То есть вместо того, чтобы всегда иметь

*  Some list text goes
   here.

Я хотел бы иметь возможность изменить это как

*         Some list text goes
          here.

или

*Some list text goes
 here.

Я огляделся, но мог найти инструкции только для перемещения всего блока влево или вправо, например http://www.alistapart.com/articles/taminglists/

ОТВЕТЫ

Ответ 1

Поместите его содержимое в span который относительно позиционирован, тогда вы можете контролировать пространство с помощью свойства left в 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>

Ответ 2

Чтобы обобщить другие ответы здесь - если вы хотите более тонкое управление пробелом между марками и текстом в элементе списка <li>, ваши варианты:

(1) Используйте фоновое изображение:

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

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

Преимущества:

  • Вы можете использовать любое изображение, которое вы хотите для пули
  • Вы можете использовать CSS background-position для размещения изображения в любом месте в любом месте по отношению к тексту, используя пиксели, ems или%

Недостатки:

  • Добавляет дополнительный (хотя и небольшой) файл изображения на вашу страницу, увеличивая вес страницы
  • Если пользователь увеличивает размер текста в своем браузере, пуля останется прежним. Вероятно, он также окажется более неактивным, поскольку размер текста увеличивается.
  • Если вы разрабатываете "отзывчивый" макет, используя только проценты для ширины, может быть трудно получить пулю именно там, где вы хотите, по диапазону ширины экрана.

2. Используйте прописку в теге <li>

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

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

Преимущества:

  • Нет изображения = 1 меньше файла для загрузки
  • Корректируя отступы на <li>, вы можете добавить столько дополнительного горизонтального пространства между буквой и текстом, как вам нравится
  • Если пользователь увеличивает размер текста, размер и размер пули должны масштабироваться пропорционально

Недостатки:

  • Невозможно перемещать маркер ближе к тексту, чем браузер по умолчанию
  • Ограничено формами и размерами встроенных типов пули CSS
  • Пуля должна быть того же цвета, что и текст
  • Отсутствует контроль над вертикальным позиционированием пули

(3) Оберните текст дополнительным элементом <span>

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

Преимущества:

  • Нет изображения = 1 меньше файла для загрузки
  • Вы получаете больше контроля над позицией пули, чем с опцией (2) - вы можете приблизить ее ближе к тексту (хотя, несмотря на все мои усилия, кажется, что вы не можете изменить вертикальную позицию, добавив padding-top в <span>. У кого-то еще может быть обходное решение для этого, хотя...)
  • Пуля может отличаться от текста
  • Если пользователь увеличивает свой размер текста, пуля должна масштабироваться пропорционально (при условии, что вы устанавливаете отступы и margin в ems not px)

Недостатки:

  • Требуется дополнительный неземный элемент (это, вероятно, потеряет больше друзей на SO, чем это будет в реальной жизни;), но это раздражает тех, кто любит, чтобы их код был как можно более быстрым и эффективным, и это нарушает разделение презентация и контент, предлагаемые HTML/CSS)
  • Отсутствие контроля над размером и формой пули

Здесь мы надеемся на некоторые новые функции стиля списка в CSS4, поэтому мы можем создавать более умные пули, не прибегая к изображениям или расширению exta:)

Ответ 3

Это должно сделать это. Обязательно поставьте свои пули наружу. Вы также можете использовать псевдоэлементы CSS, если вы можете удалить их в IE7 вниз. Я действительно не рекомендую использовать псевдоэлементы для такого рода вещей, но это помогает контролировать расстояние.

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>

Ответ 4

Старый вопрос, но: перед псевдоэлементом хорошо работает.

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

Он работает очень хорошо и не требует много дополнительных правил или html.

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

Ура!

Ответ 5

Для list-style-type: inline:

Это почти то же самое, что и DSMann8, но меньше кода css.

Вам просто нужно

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

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

Приветствия

Ответ 6

Вы можете использовать атрибут padding-left в элементах списка ( не в самом списке!).

Ответ 7

Использование текстового отступа в li работает лучше всего.

text-indent: -x px; будет перемещать пулю ближе к li и наоборот.

Использование относительного по диапазону отрицательных левых может работать неправильно со старыми версиями для IE. P.S- избегать предоставления позиций столько, сколько вы можете.

Ответ 8

Неупорядоченный список начинается с тега ul. Каждый элемент списка начинается с Элементы списка будут отмечены марками (маленькие черные круги) по умолчанию:

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

Вывод:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

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

</body>
</html>

Свойство text-indent указывает отступ первой строки в текстовом блоке.
Примечание. Отрицательные значения допустимы. Первая строка будет отклонена влево, если значение отрицательное.

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

Ответ 9

Вот еще одно решение, использующее css-счетчик и псевдоэлементы. Я нахожу его более элегантным, так как он не требует использования дополнительных html-разметки или классов 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
}

Я использую не разбивающиеся пространства, так что интервал влияет только на первую строку моих элементов списка (если элемент списка имеет длину более одной строки). Вместо этого вы можете использовать отступы.

Ответ 10

Старый вопрос, но все еще актуален. Я рекомендую использовать отрицательный text-indent. list-style-position должен быть outside.

Плюсы:

  • Пуля правильно автоматически позиционируется
  • Изменение размера шрифта не нарушает положение маркера
  • Нет дополнительных элементов (тоже нет псевдоэлементов)
  • Работает как для RTL, так и для LTR без изменений в CSS.

Минусы:

  • пытаться
  • в
  • находить
  • один :)

Ответ 11

Вы также можете использовать замену фонового изображения в качестве альтернативы, что дает вам полный контроль над вертикальным и горизонтальным позиционированием.

См. ответ на этот вопрос

Ответ 12

ul
{
list-style-position:inside;
}

Определение и использование

Свойство list-style-position указывает, должны ли маркеры элементов списка отображаться внутри или вне потока содержимого.

Источник: http://www.w3schools.com/cssref/pr_list-style-position.asp

Ответ 13

Кажется, вы можете (несколько) управлять интервалом, используя отступы на <li> тег.

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

Уловка заключается в том, что он, похоже, не позволяет вам пробивать его путь - уютно, как ваш последний пример.

Для этого вы можете попробовать отключить тип стиля списка и использовать & bull;

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

Ответ 14

Вы можете использовать ul li:before и фоновое изображение и назначить position: relative и position:absolute для li и li:before соответственно. Таким образом вы можете создать изображение и разместить его там, где хотите, относительно li.

Ответ 15

Кажется, есть более чистое решение, если вы хотите только уменьшить расстояние между точкой маркера и текстом:

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

Ответ 16

используйте <span style="display: flex;"> внутри каждого <li>.