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

можно ли изменить размер <li> элемент пуля?

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

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

Я не могу найти никакого способа достичь этого.

21
css html-lists listitem size

10 ответов

Вы имеете в виду изменение размера пули, я полагаю? Я считаю, что это связано с размером шрифта тега 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

29

вы можете обернуть содержимое 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>
18

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

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

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

вы можете найти HTML ASCII для стиля пули вы хотите, и использовать конвертер для шестнадцатеричного значения CSS.

11

на основе @dzimney ответ и как @Crisman ответ (но разных):

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

  • Lorem ipsum dolor sit amet, EI cum offendit partiendo iudicabit. В mei quaestio honestatis, duo dicit affert persecuti ЭИ. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

  • Quem suscipiantur не ЭОС, СЭД impedit explicari ЕА, falli безостый comprehensam есть. 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 offendit partiendo iudicabit. В 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.

*Quem suscipiantur не ЭОС, СЭД impedit explicari ЕА, falli безостый comprehensam есть. 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: '22';      /* The 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>
8

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

  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>

никаких изменений разметки не требуется

3

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

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

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

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

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

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

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

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

или

background-image: url(images/bullet.gif);
0
li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
0

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

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '22';
  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>
0