Pourquoi mes balles d’élément de liste se chevauchent des éléments flottants

Question

J'ai un (XHTML Strict de la page où je flotte une image aux côtés des paragraphes de texte. Tout va bien, sauf quand une liste est utilisée à la place de paragraphes. Les puces de la liste de chevauchement de la flottait l'image.

La modification de la marge de la liste ou les éléments de la liste ne doit pas aider. La marge est calculée à partir de la gauche de la page, mais le flotteur pousse les éléments de la liste à droite à l'intérieur de l' li lui-même. Donc la marge n'est utile que si je le fais plus large que l'image.

Flottant de la liste en regard de l'image fonctionne aussi, mais je ne sais pas si la liste est à côté d'un flotteur. Je ne veux pas de flotteur de chaque liste dans mon contenu juste pour résoudre ce problème. Également, flottant à gauche bousille la mise en page lorsqu'une image est flottant à droite au lieu de gauche de la liste.

Paramètre li { list-style-position: inside } ne déplacez les balles avec le contenu, mais il provoque aussi des lignes qui s'enroulent pour commencer aligné avec la balle, au lieu de alignée avec la ligne ci-dessus.

Le problème est évidemment causé par la balle d'être rendus à l'extérieur de la boîte, le flotteur de pousser le contenu de la boîte vers la droite (pas la boîte elle-même). C'est de cette façon IE et FF gérer la situation, et pour autant que je sais, pas mal d'après les spec. La question est, comment puis-je l'empêcher?

Answer 1

J’ai trouvé une solution à ce problème. Appliquer un à la veille à ce que la boîte elle-même est écartée par le flotteur, plutôt que le contenu de la boîte.

Seulement IE6 a besoin d’un dans nos commentaires conditionnels pour s’assurer que le a disposition.

Answer 2

L'ajout d'une amélioration de Glen E. Ivey la solution:

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

http://jsfiddle.net/mblase75/TJELt/

Je préfère cette technique, car il fonctionne lorsque la liste des besoins autour de l'image flottante, tandis que l' overflow: hidden technique ne sera pas. Cependant, il est également nécessaire d'ajouter de l' padding-right: 1em de la li pour les empêcher de déborder de leur conteneur.

Answer 3

Essayez list-style-position : inside pour modifier la disposition des balles.

Answer 4

Au http://archivist.incutio.com/viewlist/css-discuss/106382 j'ai trouvé une suggestion qui a fonctionné pour moi: le style de l 'li' éléments avec:

position: relative;
left: 1em;

Lorsque vous remplacez "cadratin (1 em" avec la largeur de la marge intérieure gauche/marge que vos éléments de liste serait si le flotteur n'est pas présent. Cela fonctionne très bien dans mon application, même manipulation le cas où le fond du flotteur se produit dans le milieu de la listes--les balles de décalage de la marge de gauche, juste à droite.

Answer 5

J’utilise ceci pour résoudre ce problème :