Ne peut pas obtenir horizontalement répertorié ul de débordement à l'horizontale (et faire défiler)

Que j'essaie de faire une liste non triée pour être listé horizontalement (accompli avec float:left), mais il refuse de débordement à l'horizontale. Au lieu de cela, automatiquement, il déborde dans la ligne suivante (en outre, même avec overflow-y:aucune, il crée une barre de défilement verticale automatiquement. Des idées?

<style type="text/css">
    ul {
        height:15px;
        width:400px;
        overflow-y:none;
        overflow-x:auto;
    }

    li {
        float:left;
    }

</style>

<body>
    <div>
        <ul id="someList">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
            <li>element 4</li>
            <li>element 5</li>
            <li>element 6</li>
            <li>element 7</li>
        </ul>
    </div>
</body>
Puis-je te demander dans quel contexte vous avez envie d'une barre de défilement horizontale sur une liste non ordonnée?

OriginalL'auteur achow | 2011-06-28

  1. 30

    Si je comprends bien, ce devrait être:

    http://jsfiddle.net/Uyc8d/

    J'ai passé à display: inline-block (au lieu de float: left), et je suis en utilisant white-space: nowrap pour empêcher l'emballage.

    ul {
    width: 400px;
    overflow-x: scroll;
    background: #ccc;
    white-space: nowrap
}

li {
    display: inline-block;

    /* if you need ie7 support */
    *display: inline;
    zoom: 1
}
    Je suis impressionné monsieur.
    Je vous remercie, monsieur. Impressionnant.
    white-space: nowrap; m'a beaucoup aidé, merci!
    S'assurer qu'il est PAS de FLOAT et ce sera parfait. Aussi, overflow-x: auto; est un meilleur choix sur des listes dynamiques, de cette façon il n'y a pas de bar à vue, sauf si nécessaire.
    avec amour, je vous remercie.

    OriginalL'auteur thirtydot