0
Je tente de centrer ma barre de navigation sans perdre l'excès de barre de navigation. Ce que je veux dire c'est que je veux que la barre de navigation apparaisse sur tout l'écran, mais que le texte dans la barre de navigation soit centré. J'ai trouvé que si je change la largeur de l'ul {} dans le SS pour dire..28%, il est centré sur l'écran. Mais je veux le garder à 100% pour avoir la barre de navigation sur tout le haut. Comment puis-je centrer le texte dans la barre de navigation?Centrage UL NavBar
ul {
list-style-type: NONE;
margin: auto;
padding: 0;
width: 100%;
background-color: #449DA2;
\t text-align: center;
\t font-size: 15px;
\t height: 100%
\t position: fixed;
\t overflow: auto;
}<!DOCTYPE html>
<html>
<head>
<body bgcolor=black>
<style>
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 24px 30px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: gray;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: White;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li class="dropdown"><a href="#home">Info Page</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">East</a>
<div class="dropdown-content">
<a href="#">Maryland</a>
<a href="#">Massachusetts</a>
<a href="#">New England</a>
<a href="#">New Jersey</a>
<a href="#">Pennsylvania</a>
<a href="#">Virginia</a>
<a href="#">Washington D.C.</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Central</a>
<div class="dropdown-content">
<a href="#">Illinois</a>
<a href="#">Indiana</a>
<a href="#">Michigan</a>
<a href="#">Minnesota</a>
<a href="#">Texas</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">South</a>
<div class="dropdown-content">
<a href="#">Atlanta</a>
<a href="#">Bowling Green</a>
<a href="#">Charleston</a>
<a href="#">Chattanooga</a>
<a href="#">Jackson</a>
<a href="#">Memphis</a>
<a href="#">Miami</a>
<a href="#">Nashville</a>
<a href="#">Panama</a>
<a href="#">Sarasota</a>
<a href="#">Savannah</a>
<a href="#">Tallahassee</a>
<a href="#">WPB</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">West</a>
<div class="dropdown-content">
<a href="#">California</a>
<a href="#">Colorado</a>
<a href="#">New Mexico</a>
<a href="#">Utah</a>
<a href="#">Washington</a>
</div>
</li>
</ul>
</body>
</html>
Créez un jsfiddle/codepen ou activez la fonctionnalité de fragment dans votre publication tout en l'éditant avec CTRL + M afin que nous puissions voir avec quoi nous travaillons. – ProEvilz
Enveloppez l'UL dans un DIV et déplacez la plupart du style de UL à DIV. Techniquement, c'est la couleur de fond que vous voulez passer à travers l'écran. –
Nous vous recommandons de prendre ce que @Nawed Khan a dit - enveloppez votre UL dans un conteneur et utilisez-le avec l'affichage: block/margin; 0 astuce automatique. Exemple violon: https://jsfiddle.net/deftehsafc/tsv9ddtr/ – defteH