css - menu horizontal - couleur de fond

J'ai un menu horizontal. Je veux avoir une bordure autour du menu (pas la rangée entière, seul le menu de l'espace couvre). Quand je mets une bordure sur ul, ça couvre toute la rangée, quand je mets une bordure sur li, elle a aussi une bordure entre les éléments du menu.css - menu horizontal - couleur de fond

<ul id="menu" style = "text-align:left;"> 

        <li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff...</li> 
       </ul>

Voici le CSS:

ul#menu 
{ 
    padding: 0 0 0px; 
    position: relative; 
    margin: 0 0 0; 
    text-align: right; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 


ul#menu li a 
{ 
    padding: 0px 0px; 
    margin-right:20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
}

Source

2010-10-16 TPR

Comprenez-vous votre code? Pourquoi définissez-vous text-align: left sur l'élément #menu inline, et text-align: right sur le même élément dans le CSS? –

Aussi, pourquoi avez-vous défini la position: relative sur l'élément #menu? Il ne semble pas y avoir un besoin pour cela ... –

Tuez display: inline sur les éléments de la liste et faites-les flotter à gauche à la place. Flottez également le récipient, ce qui assurera qu'il est aussi vide que son contenu. Enfin, définissez overflow: hidden sur le ul.

Source

2010-10-16 20:02:33

Déclare ul avec display:inline-block. Il faudra que ul prenne seulement l'espace nécessaire pour afficher son contenu, pas 100% de celui-ci.

An example

Source

2010-10-16 18:03:44

Je crois que le bloc inline n'est pas supporté dans IE6/7. Si oui, peut-il être utilisé comme une solution? –

Utilisez display: inline-block sur le ul et ajouter la frontière à la ul.

Source

2010-10-16 18:04:05 casablanca

Si vous avez besoin de compatibilité IE6:

#menu li { 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #00; 
    }

Vous pourriez être en mesure d'utiliser li:first-child (je ne me souviens pas, et ne pas une copie de IE6 à tester avec) pour appliquer:

#menu li:first-child { 
    border-left: 1px solid #000; 
    }

Mais vous aurez probablement à ajouter soit une -nom class ou id, au premier et dernier éléments li pour leur donner la border-left et border-right approprié.

Source

2010-10-16 18:34:10

css - menu horizontal - couleur de fond

Répondre

Questions connexes