Réglage de la largeur de navigation?

Question

Je suis le tutoriel sur l'école w3c pour CSS, La navagation passe automatiquement en pleine largeur sans me laisser l'ajuster. Je veux utiliser ces mêmes codes (cus je les comprends) Comment ajuster la largeur?

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Answer 1

Par défaut uldisplay:block. La valeur par défaut est width: 100%. Pour surcharger cela, il suffit de mettre dans n'importe quelle largeur CSS (cela va remplacer le CSS par défaut). Vous pouvez mettre n'importe quel CSS length value valide.

Ou, pour le rendre pas pleine largeur par défaut (mais seulement la longueur nécessaire), ajoutez display: inline-block au .

Answer 2

mis simplement:

Ajouter width: n;

à votre sélecteur ul dans le CSS

Fiddle

EDIT

n dans le code sera un nombre, suivi par l'unité. Donc, si vous voulez que ce soit 550 pixels de large, n = 550px - comme indiqué dans le violon.

Answer 3

La largeur par défaut est d'être 100% il primordial donc en donnant la valeur comme largeur: 700px ou largeur: 80% va changer la largeur de 700px ou 80%

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     width: 700px; 
    }