web-dev-qa-db-fra.com

Centre liste non ordonnée en DIV

Tout d’abord, je sais que cette question a été posée un million de fois ... et j’ai examiné celle-ci en particulier ainsi que plusieurs autres sur ce site et sur d’autres sites. J'ai essayé une tonne de variations différentes sur chacun de ceux-ci et je ne peux toujours pas le faire fonctionner.

J'essaie de centrer une liste non ordonnée. Il s’affiche correctement, il n’est tout simplement pas centré. Pour le moment, il est CLOSE to center ... mais si vous modifiez le paramètre "width" dans le code .nav-container dans le CSS, la position du div est décalée.

Voici mon CSS:

    html *{
  font-family: Verdana, Geneva, sans-serif;
}
body {
  padding:0px;
  margin:0px;
}
.nav-container {
  width:460px;  
  margin: 0 auto;
}
.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:150px;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
.nav-container ul a:hover {
  background: #92e792;
  color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
  color: #ffffff;
  background: #12b812;
}

Et voici mon HTML:

<body id="admin">

<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div class="nav-container">
<ul>
  <a class="tutor-button" href="tutoring.php"><li>Tutoring List</li></a>
  <a class="add-button" href="addform.php"><li>Add Students</li></a>
  <a class="admin-button" href="admin.php"><li>Admin</li></a>
</ul>
</div>

<div id="content"></div>

</body>

Je suis sûr que c'est une erreur flagrante, mais toute aide serait la bienvenue. Oh, et je le visualise actuellement dans Chrome pendant que je le teste.

jsFiddle

csshtmlhtml-listscentering
15
Austin Dennis

Votre code HTML est incorrect. Les balises <a> doivent être à l'intérieur des balises <li>. Pour que les éléments de la liste soient en ligne, définissez float: left sur eux, et overflow: hidden sur <ul> pour qu'il s'adapte à ses enfants. Supprimez la float sur .nav-container, son inutile. Jetez un oeil à ceci codepen .
Et la navigation se déplace lorsque vous modifiez sa largeur car elle vous a centré l’emballage mais pas la navigation elle-même. Vous pouvez supprimer width et margin: 0 auto et essayer:

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}
51
Angel Yan

La solution suivante est un peu raffinée:

   html * {
       font-family: Verdana, Geneva, sans-serif;
   }
   body {
       padding:0px;
       margin:0px;
   }
   .nav-container {
       width:460px;
       margin: 0 auto;
   }
   .nav-container ul {
       padding: 0px;
       list-style:none;
       float:left;
   }
   .nav-container ul li {
       display: inline;
   }
   .nav-container ul a {
       text-decoration:none;
       padding:5px 0;
       width:150px;
       color: #ffffff;
       background: #317b31;
       float:left;
       border-left: 1px solid #fff;
       text-align:center;
   }
   .nav-container ul a:hover {
       background: #92e792;
       color: black;
   }
   #add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
       color: #ffffff;
       background: #12b812;
   }


<div id="header">
    <center>
         <h2>OMS Tutoring Database</h2>
    </center>
</div>
<div class="nav-container">
    <ul>
         <li><a class="tutor-button" href="tutoring.php">Tutoring List</a></li>
         <li><a class="add-button" href="addform.php">Add Students</a>
         <li><a class="admin-button" href="admin.php">Admin</a></li>
    </ul>
</div>

Essayez-le sur: http://jsfiddle.net/hg9qvL70/2/

0
ocupocus

Le problème était que vous assigniez des largeurs fixes aux li de 150px. Vous devriez plutôt assigner la largeur à 33% et attribuer également la largeur du ul à 100%, de cette façon, quelle que soit la taille de la div, le trois li sera parfaitement centré :)

Voici la nouvelle version de JSFIDDLE

.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
  width: 100%
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:33%;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
0
Reza Khadjavi