scroll horizontal sur ul qui bug
Bonjour à tous,
je coince sur un problème de scroll horizontale.
Lorsque je fais ceci :
Code:
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:
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 :P