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/

Помістіть його вміст у 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>

Щоб узагальнити інші відповіді тут - якщо ви хочете точніше контролювати пробіл між куль і текстом у <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для розташування зображення в будь-якому місці, де ви хочете, по відношенню до тексту, використовуючи пікселі, еми або%

Недоліки:

• Додає додатковий (хоч і невеликий) файл зображення на вашу сторінку, збільшуючи вагу сторінки
• Якщо користувач збільшує розмір тексту у своєму браузері, куля залишиться на початковому розмірі. Це також, ймовірно, вийде з місця, оскільки розмір тексту збільшується
• Якщо ви розробляєте "чуйний" макет, використовуючи лише відсотки для ширини, може бути важко дістати кулю саме там, де ви хочете, для діапазону ширини екрана.

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>. Хтось інший, можливо, матиме але вирішення цього питання, хоча ...)
• Куля може бути різного кольору тексту
• Якщо користувач збільшує розмір тексту, куля повинна масштабуватися пропорційно (за умови встановлення прокладки та поля в ems не px)

Недоліки:

• Потрібен додатковий несемантичний елемент (це, ймовірно, втратить у вас більше друзів на SO, ніж це буде в реальному житті;), але це дратує тих, хто любить їх код, бути максимально витонченим та ефективним, і це порушує розділення презентації та змісту що повинен запропонувати HTML / CSS)
• Немає контролю за розміром і формою кулі

Ось сподіваємось на нові функції стилю списку в CSS4, тому ми можемо створювати розумніші кулі, не вдаючись до зображень або екстра-надбавок :)

Це має робити. Не забудьте встановити кулі зовні. ви також можете використовувати псевдоелементи 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>

Старе питання, але ось: перш ніж псевдо елемент працює тут добре.

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

Ура!

Для типу списку: inline :

Це майже те саме, що відповідь DSMann8, але менше код css.

Вам просто потрібно

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

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

Ура

Ви можете використовувати padding-leftатрибут для елементів списку ( не для самого списку!).

Використання тексту-відступу на li працює найкраще.

текст-відступ: -x px; перемістить кулю ближче до li і навпаки.

При використанні відносного періоду мінус ліворуч може не працювати належним чином у старих версіях для IE. PS - уникайте давати позиції стільки, скільки можете.

Ось ще одне рішення з використанням лічильника 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
}

Я використовую нерозривні пробіли, щоб інтервал впливав лише на перший рядок елементів мого списку (якщо елемент списку довший одного рядка). Тут ви можете використовувати набивки.

Старе питання, але все ще актуальне. Я рекомендую використовувати негативні text-indent. list-style-positionповинно бути outside.

Плюси:

• Куля правильно розміщується автоматично
• Зміна розміру шрифту не порушує положення кулі
• Немає зайвих елементів (немає: також псевдоелементів)
• Працює як для RTL, так і для LTR без зміни CSS.

Мінуси:

• спробуйте
• до
• знайти
• один :)

Непорядкований список починається з тегу 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>

Властивість "текст-відступ" визначає відступ першого рядка в текстовому блоці.
Примітка: негативні значення дозволені. Перший рядок буде з відступом зліва, якщо значення від’ємне.

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

Здається, ви можете (дещо) керувати міжряддями, використовуючи набивання на тезі <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>

Здається, є набагато більш чистим рішенням, якщо ви хочете лише зменшити проміжок між точкою кулі та текстом:

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

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

Дивіться відповідь на це запитання

ul
{
list-style-position:inside;
} 

Визначення та використання

Властивість позиції-стилю списку визначає, чи повинні з’являтися маркери елементів списку всередині або поза потоком вмісту.

Джерело: http://www.w3schools.com/cssref/pr_list-style-position.asp

Можна використовувати ul li:beforeі фонове зображення, і призначити, position: relativeі position:absoluteвідповідно, liі li:beforeвідповідно. Таким чином ви можете створити зображення та розмістити його там, де ви хочете відносно li.

Використовуйте padding-left:1em; text-indent:-1emдля <li>тегу.
Потім list-style-position: insideдля <ul>мітки.

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

Наведене нижче рішення добре працює, коли ви хочете перенести текст ближче до кулі і навіть якщо у вас є кілька рядків тексту.

margin-right дозволяє перемістити текст ближче до кулі

text-indent гарантує, що кілька рядків тексту все-таки правильно вибудовуються

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>

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