Problème width auto site horinzontal

vavoir
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
Auteur
Réponse acceptée

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;            
}