web-dev-qa-db-fra.com

Augmenter la taille du type liste-style-puce

Existe-t-il un moyen d'augmenter la taille de seulement le type de liste à puces en utilisant CSS? Je ne veux pas augmenter la taille du texte de puce, mais simplement le type de puce. Je ne peux pas utiliser d'images ou JavaScript non plus. Ce doit être quelque chose que je peux intégrer aux balises <style> dans la balise <head>.

csshtml-lists
18
Chris22

Pourrait ne pas fonctionner dans l'ancienne version d'IE.

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

Démo

Pour IE6:

Sans javascript ni images, je recommanderais de mettre un <span>&#183;</span> au début de chaque élément de la liste et de le styler.

19
bookcasey

J'ai dû faire quelque chose de similaire. Ma méthode consistait à ajouter une balise span autour du texte dans le li:

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

Ensuite, vous pouvez augmenter la taille de la police de votre li et réduire celle de votre étendue:

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

Vous devrez peut-être ajuster les hauteurs et les marges des lignes pour tenir compte de la taille supplémentaire. Mais cette méthode vous permettra également de colorer les puces séparément du texte. 

4
Tom Clarke

Lorsque vous dites que vous ne pouvez pas utiliser d'images, voulez-vous dire que vous ne pouvez pas modifier les balises li pour ajouter des images ou que vous ne pouvez pas utiliser une image du tout?

Sur les éléments li, vous pouvez définir la propriété list-style-image.

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

Cela peut toujours aller dans votre balise head sans modifier le balisage de la liste.

0
Brandon

aucun moyen que je sache.

mais vous pouvez le simuler en utilisant: before

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
0
Kae Verens

A également cherché une solution à ce problème et a constaté que si vous imbriquiez un p dans li, vous pouvez styler les balles et le texte de puce séparément. 

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

mettez n'importe quelle couleur de fond pour la balise (ex: .menu li a) et ajoutez un rembourrage pour que vous obteniez comme une boîte puis bordure-rayon et ensuite pour (.menu li) appliquer un rembourrage à gauche et à droite pour l'espacement ... ( expliqué dans l'ordre inverse)

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