web-dev-qa-db-fra.com

le texte est enveloppé sous la balle dans la liste css

J'essaie de faire en sorte que tout le texte de cette liste soit aligné contre la balle. Cependant, le texte est enveloppé sous l'image de la balle. J'ai essayé de changer le rembourrage/la marge sur les lettres a et li et aussi maintenant, mais cela l'a simplement fait ressortir par-dessus le bord droit. Les balles sont les logos WBI sous News: http://circore.com/womensbasketball/ Des idées? Merci!

csslist
11
Elaine

Je l'ai fait sur votre site avec Firefox et cela fonctionne

#menu-news li:first-of-type {
    border-top: medium none;
    height: 55px;
    list-style-position: inside;
    margin-left: 8px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
    vertical-align: top;
}

#menu-news li {
    background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
    border-top: 1px solid #666666;
    height: 55px;
    list-style-position: inside;
    margin-left: 10px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
}
9
PAULDAWG

Tu pourrais essayer

ul {
  list-style-position: outside;
}

mais j'utiliserais personnellement une image de fond et un peu de remplissage, quelque chose comme:

li {
    list-style: none;
    background: transparent url(your/icon.png) no-repeat left center;
    padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}

Voir cette page pour plus de détails: http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html

13
Grim...

Cela fonctionne pour les listes non ordonnées:

#menu-news ul    {
 list-style:outside circle;
 margin-left:60px; 
}
#menu-news ul li {
 padding-left:20px;
}

Le margin-left déplace la liste entière de 60px.

Le padding-left n'est nécessaire que si vous souhaitez un espace supplémentaire entre le point et le texte de l'élément de liste. Le texte de l'élément de liste est placé sous lui-même et non sous la puce.

4
user1375098

Vous devez ajouter display: inline-block; au lien à l'intérieur de l'élément td.
Votre classe ressemblait à ceci:

#menu-news li a {
  color: #000000;
  font-family: Arial,Helvetica,sans serif;
  font-size: 13px;
  margin-top: 10px;´
}

Mais faut ressembler à ceci:

#menu-news li a {
  display: inline-block;
  color: #000000;
  font-family: Arial,Helvetica,sans serif;
  font-size: 13px;
  margin-top: 10px;
  width: 200px;
}
1
Niklas

Essayez simple définir l'attribut de position: list-style-position: inside; rien ne doit plus fonctionner.

Voici l'exemple de travail: https://codepen.io/sarkiroka/pen/OBqbxv

0
sarkiroka

J'ai eu le même problème et voici comment je l'ai résolu. La ligne importante est background-repeat: no-repeat;. Des points de puce seront ajoutés à chaque nouvel élément de ligne/liste de votre liste, mais ils ne seront pas marqués lorsque le texte sera renvoyé à la ligne suivante. Regardez mon code ci-dessous pour voir où je l'ai placé.

ul {
  margin: 0;
  list-style-type: none;
  list-style-position: inside;
}
ul li {
    background-image: url(https://someimage.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 0px 5px 100px;
    padding-left: 39px;
    padding-bottom: 3px;
}

Quelques notes sur mon code: j'ai utilisé une image pour les points de balle. J'ai également utilisé background-image: au lieu de list-style-image: parce que je voulais contrôler la taille de la puce d'image. Vous pouvez simplement utiliser la propriété list-style: si vous voulez une puce simple et cela devrait bien fonctionner même avec du texte enveloppé. Voir https://www.w3schools.com/cssref/pr_list-style.asp pour plus d'informations à ce sujet.

0
Van I