Problème width auto site horinzontal

Par vavoir, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Je cherche à créer un site horizontal avec des colonnes qui s'aligne les unes à côtés des autres. Le problème c'est que j'ignore le nombre de colonne puisque qu'une colonne correspond à un dossier.

Voici mon code HTML

<ul class="column"> <li> <ul><li><a href="chemin" >Mon dossier</a></li></ul> </li> <li> <ul><li><a href="chemin" >Mon dossier</a></li></ul> </li> <li> <ul><li><a href="chemin" >Mon dossier</a></li></ul> </li> <li></li> fois X dossier </ul>

CSS

html, body { min-width: 100%; height: 100%; overflow: hidden; } .column { display: table; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: scroll; } .column li { width: 1000px; height: 300px; margin: 50px; float: left; background: red; }

J’ai deux problèmes, le premier les éléments s’aligne les uns en dessous des autres et la scrollbar ne s’affiche pas ?

Visiblement quelque chose m’échappe…

1 réponse

vavoir, il y a 10 ans

Eurêka ! Merci à la proprièté

white-space:nowrap;

code HTML:

<div class="column"> <ul> <li> <h2>Nom du dossier Parent</h2> <ul> <li><a href="#chemin">nom du dossier</a></li> </ul> </li> <li> <h2>Nom du dossier Parent</h2> <ul> <li><a href="#chemin">nom du dossier</a></li> </ul> </li> <li> <h2>Nom du dossier Parent</h2> <ul> <li><a href="#chemin">nom du dossier</a></li> </ul> </li> </ul> </div>

CSS:

.column { width:100%; height:100%; overflow:auto; } .column ul { margin: 0; padding: 0; list-style:none; white-space:nowrap; } .column li { display:inline-block; margin: 0 25px 0 25px; padding: 0; }