28173 sujets

CSS et mise en forme, CSS3

[Resolu][li]Bloquer le retour à la ligne des liste

Bonjour,

J'ai beau chercher je ne trouve pas de solution à mon problème, j'en appel donc à votre aide.

1- Voici ce que j'ai :
- J'ai un arbre composé de UL et LI dans mes LI j'ai une ou deux images pour les icones et une du texte.
- Cet arbre est dans une div ayant overflow:auto, pour avoir les scrollbar automatique quand l'arbre devient grand.

2- Le problème :
- Quand un "li" est plus grand que la largeur de la div, j'ai des retours automatique et mon "li" se retrouve sur plusieures lignes.
- J'aimerais que mon "li" reste sur une seule ligne quoi qu'il arrive, afin que la div qui le contienne se retrouve avec une scrollbarre horizontale.

Merci d'avance pour votre aide.
Modifié par YanK34 (15 Sep 2006 - 15:24)
Bonjour,

Essaye peut être avec white-space:nowrap; pour éviter le saut de ligne

<trop tard>
Modifié par ghost (15 Sep 2006 - 15:21)
Bonjour,

nowrap marche sous Firefox, mais pas sur IE.

Par exemple, je tente de faire un menu horizontal multiligne avec des balises <li> et je ne veux pas qu'un <li> se retrouve sur deux lignes. En mettant nowrap, j'ai une seule ligne de menu...

le code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Accueil</title>
    <link rel="stylesheet" href="ch.css" type="text/css"/>
    </head>
    <body>
        <div id="main">
            <div id="menu">
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Découvrir le CH</a></li>
                    <li><a href="#">Séjour à l'hopital</a></li>
                    <li><a href="#">Les associations</a></li>
                    <li><a href="#">L'institut de formation</a></li>
                    <li><a href="#">Les urgences</a></li>
                    <li><a href="#">Liens utiles</a></li>
                    <li><a href="#">Espaces fournisseurs</a></li>
                    <li><a href="#">Espace emploi</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>



La CSS

body{
    margin: 0;
    padding: 0;
    background: #9EB655 url(images/degrade.jpg) repeat-x;
    font: normal 10px verdana
    }
    
#main{
    width: 540px;
    height: 600px;
    background: url(images/imagefond.jpg) top center no-repeat; 
    margin-left: auto; 
    margin-right: auto;
    }
    
#menu{
    float: left;
    width: 500px;
    margin: 280px 20px 0 20px;
    text-align: center;
}

#menu ul{
    margin: 0;
    padding: 0;
}

#menu li{
    list-style-type: none;
    margin: 10px 5px 0 5px;
    line-height: 2.5em;
    display: inline;
    white-space: nowrap;  
}

#menu li a{
    padding-top: 5px;
    color: #666666;
    text-decoration: none;
    font-weight: bold;
}

#menu li a:hover{
    background: url(images/li.jpg) top center no-repeat;
}



Quelqu'un a une solution pour IE?
Pourtant je fais la même chose que toi. Mon but aussi est de faire un menu déroulant.
Nowrap marche parfaitement sous IE et FF pour moi.
Sujet clos
Aller à