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

Question

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

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

Объект 1
Объект 2
Объект 3

Я хочу уменьшить разрыв между маркером и "I".

62

css html-lists

задан bjb568 26 July 2018 в 16:33

5 ответов

Другие вопросы по тегам:

css html-lists

Похожие вопросы:

score 4 · Answer 1

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

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

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

4

ответ дан 24 November 2019 в 16:44

score 31 · Answer 2

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

li {
    text-indent: -4px;
}

... где ваш HTML-код выглядит так:

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

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

score 4 · Answer 3

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

li {list-style-position: inside; }

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

Отредактировано

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

Извините, от меня больше нет никакой пользы.

Отредактировано

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

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

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

score 30 · Answer 4

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

score 21 · Answer 5

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

elements

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