CSS pour recréer LI avec la balle, mais sans l'aide d'un LI

Je suis en train de créer une mise en page qui ressemble à une batterie au lithium avec une balle, mais qui n'utilise pas de LI. Je ne peux pas utiliser une batterie LI parce que je veux permettre à différents éléments dans la même liste de différents balle images. Et à partir de ce que je peux dire LI styles de puce ne peut être réglé que dans le UL, de sorte que tous LI dans le même UL doivent avoir la même balle de l'image... et je n'en veux pas. S'il vous plaît corrigez-moi si je me trompe au sujet de la façon dont LI peut être stylé.

Voici le code HTML que je suis en train de style de sorte qu'il recrée un LI balle.

<div><img src="..."/><p>Inbox:</p></div>

Je ne suis pas sûr de la meilleure façon d'atteindre les objectifs suivants:

Faire de puce d'affichage de l'image à gauche de l'élément de zone de texte de sorte que lorsqu'il y a beaucoup de texte, la balle se bloque dans la marge de gauche. Le texte ne devrait pas l'écharpe sous les balles de l'image.
Garder la balle à l'image alignée milieu de la première ligne de texte (dans le cas de l'habillage de texte). Et de garder la balle en milieu aligné lorsque le texte des changements de taille.

Mon de haut niveau, l'objectif est de recréer TaskPaper de l' de l'INTERFACE utilisateur dans une page web:

Je serai heureux de donner une licence gratuite pour la personne avec la solution que je préfère.

Merci,

Jesse

Vous pouvez définir le style de puce avec le css pour chaque li individuellement...

OriginalL'auteur | 2009-07-14

5

Vous pouvez utiliser des classes CSS pour faire ça:
```
<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>
```
Et si vous avez besoin d'une image arbitraire, aller comme LI.whatever { list-style: url(myimage.png) }

jsbin.com/exopu comme un exemple.
Eh bien, je suis un idiot... mais je vous remercie 🙂 le CSS n'est pas mon normale de compétences, et je pense qu'elle montre. Si vous souhaitez obtenir une licence d'TaskPaper (dans le Mac app) s'il vous plaît e-mail moi jesse à hogbaysoftware com.
Je crois que IE a des problèmes avec l'au-dessus - si c'est le cas, utilisez l'image de remplacer la méthode de quelqu'un a posté ci-dessous.

OriginalL'auteur exclsr
1

vous pouvez utiliser span comme alternative
```
<span><img src="">text</img></span>
```
ou vous pouvez utiliser par défaut ul mais avec des images différentes pour chaque li
```
<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>
```
d'aligner la marge de chaque image sur li à l'aide de css
```
li img{margin-left: 5px}
```
oui quelque chose comme ça

OriginalL'auteur Dels
1

Vous pouvez également utiliser list-style-type: none; puis l'utilisation de l'image de fond

OriginalL'auteur Bostone
1

Si vous ne voulez pas faire une liste et de la nécessité de mettre des balles dans un lien, vous pouvez le faire comme ceci:
```
<a id="bulletlink" href="">hey</a>
```
le css devrait ressembler à ceci:
```
bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}
```
L'image est un simple cercle noir de 8px par 8px avec un fond transparent et vous donner l'ancre de texte ou un rembourrage de sorte qu'il ne chevauche pas la balle. Bien sûr vous pouvez le faire pour beaucoup de choses, y compris vrd, des images, du texte, en-têtes, etc... vous avez juste besoin d'être en mesure de mettre un background-image.

OriginalL'auteur Samuel Lopez
1

@Dels-Votre exemple à l'aide de LIs avec les Dhceu à l'intérieur serait en fait de travail parce que vous êtes toujours à l'aide de l'élément LI en face de chaque image. L'effet serait quelque chose comme
- <\img> trucs
- <\diff img> plus de choses
Vous souhaitez toujours avoir la puce standard de style, mais avec une image à côté d'elle. Je pense que vous étiez en essayant de couvrir qu'avec l'image, en marge-ing, mais si cela fonctionnerait, dont je ne suis même pas convaincu, je crois que vous auriez à utiliser une négative de la marge de gauche.

OriginalL'auteur shortstuffsushi

Vous devez vous connecter pour publier un commentaire.