Увеличьте размер типа list-style-bullet - PullRequest
Новая
       2

Увеличьте размер типа list-style-bullet

18 голосов
/ 09 декабря 2011

Есть ли способ увеличить размер просто типа списка с использованием CSS?Я не хочу увеличивать размер текста маркера, просто тип маркера.Я не могу использовать изображения или JavaScript либо.Это должно быть то, что я могу встроить в теги <style> внутри тега <head>.

Ответы [ 6 ]

20 голосов
/ 09 декабря 2011

Может не работать в старой версии IE.

li:before{ content:'\00b7'; font-size:100px; }

Демо

Для IE6:

Без javascript или изображений я бы порекомендовал поставить <span>&#183;</span> в начале каждого элемента списка и стилизовать его.

4 голосов
/ 20 марта 2015

Я должен был сделать нечто подобное.Мой метод заключался в добавлении тега span вокруг текста внутри li: 

<li><span>Item 1</span></li>
<li><span>Item 1</span></li>

Затем вы можете увеличить размер шрифта li и уменьшить размер шрифта вашего span: 

li {
  font-size: 20px;
}
li span {
  font-size: 14px;
}

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

0 голосов
/ 05 апреля 2017

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

<div>
  <ul>
    <li><p>Hello</p></li>
  </ul>
</div

div ul li {
 /*this will style the bullets*/
}

div ul li p {
/*this will style the text*/
}
0 голосов
/ 21 декабря 2012

установите любой цвет фона для тега (например: .menu li a) и добавьте отступы, для которого вы получите, как поле, затем border-radius, а затем для (.menu li) примените отступы для левого и правого полей... (объясняется в обратном порядке) 

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
0 голосов
/ 09 декабря 2011

Я не знаю об этом.

, но вы можете подделать его, используя: before 

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
0 голосов
/ 09 декабря 2011

Когда вы говорите, что не можете использовать изображения, вы имеете в виду, что вы не можете редактировать теги li для добавления изображений или что вы вообще не можете использовать изображение?

Для элементов li вы можете установить свойство list-style-image. 

li {
 list-style-image: url('/imagepath.png');
}

Это все еще может быть в вашем заголовке без редактирования разметки списка.

...