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

Ответ 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

Ответ 2

Вы можете обернуть содержимое li в другой элемент, например span. Затем дайте li a больше 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>

Ответ 3

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

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

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

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

Ответ 4

На основе ответа @dzimney и аналога ответа @Crisman (но другого):

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

• Lorem Ipsum Dolor Sit Amet, Ei Cum Offundit Partiendo Iudicabit. В mei quaestio honoratis, 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 compethsamest in in. Vide dicunt ancillae cum te, 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 honoratis, 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 compitesamest in. Vide dicunt ancillae cum te, habeo delenit deserunt mei 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>

Ответ 5

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

• Отключение пули вообще
• Повторное добавление настраиваемых маркеров с помощью псевдоэлемента ::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>

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

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

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

или

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

Ответ 9

Если вы поместите содержимое <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>

Результаты в:

Ответ 10

Если вы не хотите обертывать содержимое в <li> с помощью <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>