it-swarm.dev

Zentrierte ungeordnete Liste in DIV

Zunächst einmal weiß ich, dass diese Frage eine MILLIONEN-mal gestellt wurde ... und ich habe hier speziell sowie einige andere auf dieser Site und anderen Sites angesehen. Ich habe jede Menge verschiedener Varianten ausprobiert und kann es immer noch nicht zum Laufen bringen.

Ich versuche eine ungeordnete Liste zu zentrieren. Es wird richtig angezeigt, es ist nur nicht zentriert. Momentan ist es CLOSE zu zentrieren ... aber wenn Sie den "width" -Parameter im .nav-container-Code im CSS ändern, wird die Position des div-Objekts verschoben.

Hier ist mein 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;
}

Und hier ist mein 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>

Ich bin mir sicher, dass es ein eklatant einfacher Fehler ist, aber jede Hilfe wäre sehr dankbar. Oh, und ich sehe es gerade in Chrome, während ich es teste.

jsFiddle

15
Austin Dennis

Ihr HTML ist falsch. Die <a>-Tags sollten sich innerhalb der <li>-Tags befinden. Damit die Listenelemente Inline werden, setzen Sie float: left für sie und overflow: hidden für <ul>, damit sie auf die untergeordneten Elemente passen. Entfernen Sie die float von .nav-container, die nicht erforderlich ist. Schauen Sie sich diese codepen an.
Und das Navi bewegt sich, wenn Sie seine Breite ändern, weil Sie den Wrapper zentriert haben, nicht aber das Navi. Sie können width und margin: 0 auto entfernen und versuchen:

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

Die folgende Lösung ist etwas verfeinert:

   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>

Versuchen Sie es unter: http://jsfiddle.net/hg9qvL70/2/

0
ocupocus

Das Problem war, dass Sie den LIs von 150px feste Breiten zugewiesen haben. Stattdessen sollten Sie die Breite auf 33% und auch die Breite der ul auf 100% festlegen, auf diese Weise, unabhängig davon, wie groß das Div ist Drei Li werden perfekt zentriert sein :)

Hier ist die aktualisierte 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