Augmenter la taille du list-style-type de puce

Est-il un moyen d'augmenter la taille de juste la balle list-style-type à l'aide de CSS? Je ne veux pas augmenter la taille de la balle de texte, juste le type de puce. Je ne peux pas utiliser les images ou JavaScript soit. Ça doit être quelque chose que je peux intégrer à l'intérieur de <style> des balises dans les <head> tag.

InformationsquelleAutor Chris22 | 2011-12-09
  1. 20

    Peut ne pas fonctionner dans la vieille version d'IE.

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

    Démo

    Pour IE6:

    Sans javascript ou des images, je vous recommande de mettre un <span>&#183;</span> en début de chaque élément de la liste et style.

    • +1 excellent exemple (le vertical-align:middle était en fait ici une importance CRUCIALE. nice)! aussi la place de "\00b7" peut utiliser des "•" 🙂
    • Je l'utilise généralement échappé de valeurs hexadécimales, comme j'ai eu quelques démêlés avec l'aide du symbole. Par exemple, ceci: span:before{content:""";} ne fonctionne pas, mais c': span:before{content:"\0022";} n'.
    • Merci, bookcasey. Excellente solution, bien que je ne peux pas utiliser :before depuis son pour un IE6 seul site web.
    • Sans javascript ou des images, avec le soutien nécessaires pour IE6, je vous recommande de mettre un <span>&#183;</span> en début de chaque élément de la liste et de style.
    • Grâce bookcasey. Ouai, c'est ça la réponse. post afin que je puisse vous attribuer les points. c'est laid, mais il fonctionne... 😉 je voulais juste savoir si il y avait moyen le plus propre du style le type de puce. Merci tout le monde
    • La vraie déception, c'est que vous avez à l'appui de IE6. 🙂 J'ai réfléchi à la nouvelle solution dans ma réponse.
    • Wow. Je n'ai jamais entendu parler d'un IE6 SEUL site web. Donc, pour ceux sur les autres navigateurs, vous avez une fenêtre pop-up avec un lien d'héritage de téléchargement d'IE6?
    • à l'époque, la société avait des clients qui pourraient avoir été en utilisant IE6, nous avons donc dû la soutenir. Heureux ces jours sont révolus 🙂
    • malheureusement 00b7 n'est pas rond.. devient évident, si vous augmentez la taille de la police beaucoup.
    • Je ne pense pas que cela résout complètement le problème. Cela modifie la hauteur de la ligne pour la première ligne. C'est un problème si vous avez un multiple de la ligne de l'élément. Exemple: jsfiddle.net/1yjcg59c

    InformationsquelleAutor bookcasey
  2. 4

    Que j'avais à faire quelque chose de similaire. Ma méthode est d'ajouter une balise span autour du texte à l'intérieur de la batterie au lithium:

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

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

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

    Vous devrez peut-être ajuster la ligne des hauteurs et des marges pour tenir compte de l'extra li dimensionnement. Mais cette méthode vous permettra également de couleur les balles distinctes à partir du texte.

    • Cela fonctionne bien pour le style de l'balles dans les e-mails car vous pouvez l'utiliser en ligne de styles pour eux. Oh l'horreur des e-mails HTML! 🙂
    InformationsquelleAutor Tom Clarke
  3. 0

    Quand vous dites que vous ne pouvez pas utiliser les images, voulez-vous dire que vous ne pouvez pas modifier le li balises à ajouter des images, ou que vous ne pouvez pas utiliser une image?

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

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

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

    • merci, Brandon. Ouai, je ne peux pas utiliser d'images.
    • Trouvé ce stackoverflow.com/questions/7563344/.... Je vais regarder plus en elle. Bien que je ne peux pas utiliser le javascript soit. C'est vraiment une vieille application pour une utilisation spéciale.
    InformationsquelleAutor Brandon
  4. 0

    aucun moyen que je suis au courant.

    mais vous pourriez faux en utilisant :avant

    ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
    • Merci, Kae. C'est pour un IE6 site ne peut donc pas utiliser before
    InformationsquelleAutor Kae Verens
  5. 0

    mettre une couleur de fond de l' (ex: .menu li a )de la balise et ajouter le remplissage que vous obtiendrez comme une boîte, puis border-radius et puis pour ( .menu li ) s'appliquent rembourrage pour la gauche et la 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;}
    InformationsquelleAutor Lohith
  6. 0

    Était à la recherche d'une solution de ce trop et a constaté que si vous imbriquez un p à l'intérieur de li, vous pouvez définir le style, les balles et les balles de texte 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*/
}
    InformationsquelleAutor deeble