DIV 中无序列表居中

问题描述 投票：0回答：4

首先，我知道这个问题已经被问过一百万次了......并且我专门查看了这个问题以及本网站和其他网站上的其他几个问题。我已经尝试了很多不同的变体，但仍然无法使其工作。

我正在尝试将无序列表居中。它显示正确，只是未居中。目前，它接近中心...但是如果您更改 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

css html html-lists centering
4个回答
55
投票

您的 HTML 不正确。 

<a>
标签应位于 
<li>
标签内。要使列表项内联，请在它们上设置 
float: left
，并将 
overflow: hidden
设置为 
<ul>
，以便它适合其子项。把
float
上的
.nav-container
去掉，没必要的。看看这个codepen。
当您更改导航的宽度时，导航会移动，因为您将包装器居中，而不是导航本身。您可以删除 
width
和 
margin: 0 auto
并尝试：

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}
0
投票

问题是你为 150px 的 li 分配了固定宽度。相反，你应该将宽度分配为 33%，并将 ul 的宽度分配为 100%，这样，无论 div 的大小是什么，三个李将完美居中:)

这是更新后的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
投票

下面的解决方案有点精致：

   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
投票

33%的解决方案很适合我。谢谢大家！我一直在努力处理那些没有在中心完美对齐的列表。太棒了！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.