Bonjour à tous,

je coince sur un problème de scroll horizontale.

Lorsque je fais ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;height:150px;">
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
</ul>
pas de soucis, ça fonctionne, les images se mettent sur une seule ligne, et le scroll horizontale se met.

Par contre, lorsque je dois changer mon code html, pour y ajouter un <div> au dessus de l'image (pour lui donner un titre), ça ne fonctionne pas et je ne comprend pas du tout pourquoi.
les <li> en float: left, ça bug.
les <div> en display: inline, ça bug

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;height:150px;">
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
</ul>
si quelqu'un à une idée