J'ai une page (XHTML Strict) où je flotter une image à côté de paragraphes de texte normaux. Tout se passe bien, sauf lorsqu'une liste est utilisée à la place de paragraphes. Les puces de la liste chevauchent l'image flottante.

La modification de la marge de la liste ou des éléments de la liste n'aide pas. La marge est calculée à partir de la gauche de la page, mais le flottant pousse les éléments de la liste vers la droite à l' intérieur d'li elle - même. Ainsi, la marge n'aide que si je la fais plus large que l'image.

Faire flotter la liste à côté de l'image fonctionne également, mais je ne sais pas quand la liste est à côté d'un flottant. Je ne veux pas faire flotter chaque liste de mon contenu juste pour résoudre ce problème. De plus, le flottement à gauche gâche la mise en page lorsqu'une image flotte vers la droite au lieu de la gauche de la liste.

Le réglage li { list-style-position: inside }déplace les puces avec le contenu, mais il amène également les lignes qui s'enroulent à commencer alignées avec la puce, au lieu d'être alignées avec la ligne ci-dessus.

Le problème est évidemment causé par le rendu de la balle à l'extérieur de la boîte, le flotteur poussant le contenu de la boîte vers la droite (pas la boîte elle-même). C'est ainsi que IE et FF gèrent la situation, et pour autant que je sache, pas mal selon les spécifications. La question est, comment puis-je l'empêcher?

J'ai trouvé une solution à ce problème. L'application d'un ul { overflow: hidden; }sur le ulgarantit que la boîte elle-même est écartée par le flotteur, au lieu du contenu de la boîte.

Seul IE6 a besoin d'un ul { zoom: 1; }dans nos commentaires conditionnels pour s'assurer que la ulmise en page a.

Ajout d'une amélioration à la solution de Glen E. Ivey :

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 elle fonctionne lorsque la liste doit circuler autour de l'image flottante, overflow: hiddencontrairement à la technique. Cependant, il est également nécessaire d'ajouter padding-right: 1emà la lipour les empêcher de déborder de leur conteneur.

C'est là que la propriété "display" prend tout son sens. Définissez le CSS ci-dessous pour que la liste fonctionne avec le contenu flottant.

affichage: table; fonctionne avec le contenu flottant (comblant le vide) mais sans cacher le contenu derrière lui. Un peu comme une table :-)

.img {
  float: left;
}

.table {
  display: table;
}

<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

EDIT: N'oubliez pas d'ajouter une classe pour isoler les listes pour lesquelles vous souhaitez faire cela. Par exemple "ul.in-content" ou plus généralement ".content ul"

Essayez list-style-position: inside pour changer la disposition des puces.

Sur http://archivist.incutio.com/viewlist/css-discuss/106382, j'ai trouvé une suggestion qui a fonctionné pour moi: stylisez les éléments 'li' avec:

position: relative;
left: 1em;

Où vous remplacez "1em" par la largeur du remplissage / marge gauche que vos éléments de liste auraient si le flottant n'était pas présent. Cela fonctionne très bien dans mon application, même en traitant le cas où le bas du flottant se trouve au milieu des listes - les puces reviennent à la marge gauche (locale) juste à droite.

Pourquoi ça overflow: hiddenmarche

La solution est aussi simple que:

ul {overflow: hidden;}

Une boîte de bloc avec overflow:autre que visible établit un nouveau contexte de formatage de bloc pour son contenu. Recommandation W3C: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Exemple

Les boutons de mon site Web , qui sont <li>déguisés, sont faits comme ça. Réduisez la taille de la fenêtre (fenêtre) de votre navigateur pour voir l' indentation en action .

Réponses connexes

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Article avec exemples

• Overflow - un avantage secret

En ajoutant overflow: auto;à vos ulœuvres au moins pour moi.

Mettre à jour

J'ai mis à jour mon jsfiddle pour visualiser ce qui se passe. Lorsque vous avez le ulcôté flottant img, le contenu du ulsera poussé par le flotteur, mais pas le conteneur réel. En ajoutant overflow: autol'ensemble, la ulboîte sera poussée par le flotteur au lieu de seulement le contenu.

Vous pouvez attribuer position: relative; left: 10px;au li. (Vous pouvez également lui donner un margin-right: 10px;, sinon il risque de devenir trop large sur le côté droit.)

Ou, si vous souhaitez utiliser floatpour le ul- comme suggéré par d'autres - vous pouvez probablement empêcher le reste de flotter à droite de l'ul en utilisant clear: leftl'élément qui suit l'ul.

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

ul {
   display: table;
}

Avertissement

Les listes à côté des éléments flottants posent des problèmes. À mon avis, le meilleur moyen d'éviter ce type de problèmes flottants est d'éviter les images flottantes qui se croisent avec le contenu. Cela aidera également lorsque vous devrez prendre en charge la conception réactive.

Une conception simple consistant à centrer des images entre les paragraphes semblera très attrayante et sera beaucoup plus facile à supporter que d'essayer d'être trop sophistiquée. C'est aussi à un pas d'un <figure>.

Mais je veux vraiment des images flottantes!

Ok, donc si tu es fou assez persistant pour continuer dans cette voie, il y a des techniques de couple qui peuvent être utilisés.

Le plus simple est de faire en sorte que la liste utilise overflow: hiddenou overflow: scrollpour que la liste soit essentiellement réduite, ce qui ramène le remplissage là où il est utile:

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Cette technique présente cependant quelques problèmes. Si la liste devient longue, elle ne s'enroule pas réellement autour de l'image, ce qui va à l'encontre de l'objectif de l'utilisation floatde l'image.

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Mais je veux vraiment emballer des listes!

Ok, donc si vous êtes encore plus fou, plus persévérant et vous devez absolument continuer sur cette voie, il existe une autre technique qui peut être utilisée pour envelopper les éléments de la liste et maintenir les puces.

Au lieu de remplir le <ul>et d'essayer de le faire se comporter correctement avec des balles (ce qu'il ne semble jamais vouloir faire), retirez ces balles du <ul>et donnez-les au <li>s. Les balles sont dangereuses, et le <ul>juste n'est pas assez responsable pour les gérer correctement.

img {
  float: left;
}
.wrapping-list {
  padding: 0;
  list-style-position: inside;
}
.wrapping-list li {
  overflow: hidden;
  padding-left: 25px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Ce comportement d'encapsulation peut faire des choses étranges sur du contenu complexe, je ne recommande donc pas de l'ajouter par défaut. Il est beaucoup plus facile de le configurer comme quelque chose qui peut être choisi plutôt que comme quelque chose qui doit être remplacé.

Essayez ce qui suit sur votre étiquette UL. Cela devrait prendre en charge les puces superposées à votre image et vous n'avez pas à gâcher votre alignement gauche causé par list-position: inside.

overflow: hidden; 
padding-left: 2em; 

J'ai lutté avec cela moi-même. Le mieux que j'ai réussi est le suivant:

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

Le texte n'est pas réellement en retrait mais la puce apparaît.

Modifié pour mettre à jour en fonction du commentaire d'OP

ok, puis divisez-le en 2 div imbriqués ensemble

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

essayez de changer le css ul li en

ul {float: gauche; fond: bleu; }

Après avoir combattu ce problème intéressant dans plusieurs projets et étudié pourquoi cela se produit, je crois enfin avoir trouvé les deux: une solution fonctionnelle et «réactive» .

Voici le tour de magie, exemple en direct: http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}

Travailler dans un LMS sans accès à la tête du document a trouvé plus facile à utiliser en margin-right: 20pxtant que style en ligne pour l'image. Ce que je dois à ce site .

essaye ça:

li{
    margin-left:5px;
}

Si vous voulez qu'ils partent à gauche, entrez simplement une valeur - ## px.

ou vous pouvez faire ceci:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

puis supprimez tout le style de la li

Que dis-tu de ça?

ul{float:left; clear:right}

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto fera que l'élément lui-même sera aligné à droite. Définissez la hauteur et la largeur de l'élément souhaité - dans mon cas, c'est une image d'arrière-plan dans un div à l'intérieur

Vous pouvez également essayer de faire flotter le ulvers la gauche et définir unwidth , de sorte qu'il flotte à côté de l'image.

Quelque chose d'un peu comme ça jsfiddle ?

Je l'ai réparé avec

div.class-name ul {
  clear: both;
}

width: auto; overflow: hidden;

Ajouter display:table; à ul:

ul{display:table;}