css – DIV中的中心无序列表

首先,我知道这个问题已经被问了一百万次了,而且我已经看过 this one specifically以及这个网站和其他网站上的其他几个.我已经尝试了各种各样的变化,但仍然无法让它工作.

我正在设计一个无序列表.它正确显示,它只是不中心.目前,它是关闭中心…但是如果您更改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

解决方法

您的HTML不正确< a>标签应位于< li>标签.要使列表项内联,将float设置为left,并将overflow：hidden隐藏到< ul>所以它适合其孩子.删除.nav-container上的浮动,它是不必要的.看看这个 codepen.
当您更改宽度时,导航会移动,因为它以包装器为中心,而不是导航本身.您可以删除宽度和边距：0自动尝试：

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

css – DIV中的中心无序列表

解决方法

猜你在找的CSS相关文章