在DIV中居中显示无序列表

Question

在DIV中居中显示无序列表

17

首先，我知道这个问题已经被问了无数次…… 我查看了这个以及该网站和其他网站上的几篇文章。我尝试了每个方法的很多变化，但仍然无法使其正常工作。

我正在尝试将一个无序列表居中显示。它的显示是正确的，只是没有居中。目前它离中心还是比较接近的...但如果您在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

- Austin Dennis

两个注意事项：你把列表项包装在<a>标签中。这不是有效的HTML - 你应该像这样使用它：<li><a></a></li>。而且你可以创建一个fiddle来解决你的问题，这样别人就可以轻松地看到你的问题并进行实时尝试。我已经为你创建了一个：http://jsfiddle.net/GLyEB/ - insertusernamehere

抱歉，我回去修复了代码，将<a>标签放在<li>标签内部。但是问题仍然存在。 - Austin Dennis

3个回答

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/

- ocupocus

0

问题在于您将li的宽度固定为150px。相反，您应该将宽度分配给33％，并将ul的宽度分配为100％，这样无论div的大小如何，三个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;
}

- Reza Khadjavi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Angel Yan · Accepted Answer

您的HTML代码有误，应该将标签放在

标签内部。为了使列表项呈现为行内元素，请在它们上面设置float: left，并在

标签上设置overflow: hidden以适应其子元素。移除.nav-container上的float属性，这是不必要的。您可以查看这个

codepen

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