web-dev-qa-db-ja.com

DIVの中央の順序なしリスト

まず、この質問が何百万回も聞かれたことを知っています...そして、このサイトや他のサイトの他のいくつかと同様に これは特に を見ました。私はこれらのそれぞれについてたくさんの異なるバリエーションを試しましたが、それでも動作させることができません。

順序付けられていないリストを中央に配置しようとしています。正しく表示されますが、中央に配置されていません。現時点では、中心に近い...ですが、CSSの.nav-containerコードの「width」パラメーターを変更すると、divの位置がシフトします。

これが私の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;
}

そして、これが私の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>

間違いなく単純なエラーであると確信していますが、どんな助けでも大歓迎です。ああ、私は現在、Chromeでテストしています。

jsFiddle

csshtmlhtml-listscentering
15
Austin Dennis

HTMLが正しくありません。 <a>タグは<li>タグ内にある必要があります。リスト項目をインラインにするには、それらにfloat: leftを設定し、overflow: hiddenを<ul>に設定して、子に合わせます。不要な.nav-container上のfloatを削除します。これを見てください codepen 。
。 widthとmargin: 0 autoを削除して試すことができます：

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

次のソリューションは少し洗練されています。

   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>

以下で試してください： http://jsfiddle.net/hg9qvL70/2/

0
ocupocus

問題は、固定幅をliの150pxに割り当てることでした。代わりに、divのサイズに関係なく、幅を33％に割り当て、ulの幅を100％に割り当てる必要があります。 3つのliは完全に中央揃えされます:)

更新された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