Настроить маркеры элементов списка с помощью CSS

Question

Можно ли изменить размер <li> элемента bullet ?

Взгляните на код ниже:

li {
    list-style: square; // I want to change the size of this squared bullet. 
}

Кажется, я не могу найти способ достичь этого.

Answer 1

Вы подразумеваете изменение размера пули, я полагаю?Я считаю, что это связано с размером шрифта тега li.Таким образом, вы можете увеличить размер шрифта для LI, а затем уменьшить его для элемента, содержащегося внутри.Вид отстой, чтобы добавить дополнительную разметку, но что-то вроде:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

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

ul{
  list-style: square url("38specialPlusP.gif");
 }

См .: http://www.w3schools.com/css/css_list.asp

Answer 2

Вы можете обернуть содержимое li в другой элемент, например span.Затем задайте li большее font-size и установите нормальный font-size обратно на span:

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

Answer 3

На основе @ dzimney ответа и аналогично @ Crisman answer (но отличается):

Этот ответ хорош, но имеет проблему с отступом (появляются маркеры внутри li область действия ).Вероятно, вы не хотите этого.См. Простой список примеров ниже (это список HTML по умолчанию):

• Lorem ipsum dolor sit amet, например, partindo iudicabit.В mei quaestio honestatis, duo dicit affertti преследования.Etiam nusquam cu его, nec alterum posidonium philophia te.Nec a purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, Falli inermis понимают в., habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

Но если вы воспользуетесь упомянутым ответом, список будет примерно таким (без учета размерапуль):

• Lorem ipsum dolor sit amet, ei cum offndit partiendo iudicabit.В mei quaestio honestatis, duo dicit affertti преследования.Etiam nusquam cu его, nec alterum posidonium philophia te.Nec a purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, falli inermis compésseam in.in. Tale sint ex his, ipsum essent appellantur et cum.

---

Поэтому я рекомендую такой подход, который решает проблему:

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

Answer 4

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

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

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

Answer 5

Другой способ изменить размер пуль будет:

1. Отключение пуль в целом
2. Повторное добавление пользовательских маркеров с помощью псевдоэлемента ::before.

Пример:

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

Изменения в разметке не нужны

Answer 6

Полагаю, вы имеете в виду размер маркера в начале каждого элемента списка. Если это так, вы можете использовать изображение вместо него:

list-style-image:url('bigger.gif');
list-style-type:none;

Если вы имели в виду фактический размер элемента li, то вы можете изменить его как обычно с помощью width и height.

Answer 7

Если вы не хотите обернуть содержимое в <li> s <span> s, вы также можете использовать :before следующим образом:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Настройте размеры шрифта на :before так, как вам нравится.

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

Answer 8

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

Например:

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Тогда CSS:

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

Более сложный пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

Результат:

Answer 9

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

Вы можете использовать фоновое изображение с соответствующими отступами, чтобы подтолкнуть контент, чтобы он не перекрывался:

list-style-image:url(bigger.gif);

или

background-image: url(images/bullet.gif);

Answer 10

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>