Puces de li et image en float left

Version imprimable

Juste un petit post rapide pour partager une bizarrerie que j'ai rencontré récemment

le code html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div> <img src="xxx" /> <div> <ul> <li>un</li> <li>deux</li> <li>trois</li> <li>quatre</li> </ul> </div> </div>
l'image est en float left...

On serait en droit de s'attendre donc à avoir de gauche à droite l'image, puis les puces, puis les textes des li ...

Hé bien sous IE non on a d'abord les puces, puis l'image et enfin le texte les li !!!

J'ai trouvé deux solutions pour remédier à cela:

- mettre un display table sur le ul
- mettre un list-style-position : inside sur les li

Si vous avez d'autres retours d'expérience sur ce bug ...

Bonjour,

L'image étant flottante, elle se "pose SUR" le bloc (en "écartant" les éléments : sur I.E. entre les puces et les textes).

Si tu inspectes (F12) la liste, on voit bien que l'image est "dessus".

En fait, ce n'est pas une bizarrerie, car c'est ce qui permet à du texte de "s'enrouler autour" des images.
(par contre, s'est mal adapté aux listes à puces... !)
Code:

1 2 3 img { float:left; } ul { display:inline-block; }
Avec display:inline-block;, le bloc... "fait bloc" (!), et se place à droite de l'image.
l'image est bien à gauche du bloc, et plus "dessus".

N.B. la <div> entourant le <ul> n'est pas utile.

Sinon :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div> <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" /> <div> <p>sqdfqfsdfqsdf qsdfqsdf</p> <ul> <li>un</li> <li>deux</li> <li>trois</li> <li>quatre</li> </ul> </div> </div>
Code:

1 2 img { float:left; } div > div { display:inline-block; }

20/04/2016, 16h48
SpaceFrog

Oui le principe du float et du texte qui se wrap autour de l'image je vois bien.

Mais pourquoi donc les puces de li se désolidarisent comme ça ...

2 pièce(s) jointe(s)

Je suppose qu'elle ont un positionnement de type "absolute" par rapport au li.
Et par rapport au coté "left".

du genre :

Code:

li:before { position:absolute; left:xxx;... }

list-style-position (outside/inside) doit juste modifier le comportement left:xxx;.

(on visualise mieux en grisant un li)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="div1">
  <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" />
    <ul>
      <li style="background-color:#ccc;">un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
    </ul>
</div>
<br />
<div id="div2">
  <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" />
    <ul>
      <li style="background-color:#ccc;">un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
    </ul>
</div>

Code:

1
2
3
img { float:left; padding-left:50px; /* (pour mieux voir les puces) */ }
 
#div2 > ul { display:inline-block; } /* Uniquement sur le 2eme div */

Exemple (Edge / Firefox) :

21/04/2016, 12h01
SpaceFrog

:koi: Quelle idée de différentier le style des puces par rapport au li ...
Je ne comprends pas l’intérêt de l'absolute

bien vu les exemples ...