Aus*_*nis 15 html css html-lists centering
首先,我知道这个问题已被问过数百万次......而且我已经在这个网站和其他网站上专门查看了这个问题以及其他几个问题.我已尝试过各种不同的变化,但仍无法使其发挥作用.
我试图将无序列表集中在一起.它显示正确,它没有居中.目前,它关闭到中心...但是如果你改变CSS中.nav容器代码中的"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中查看它,因为我正在测试它.
Ang*_*Yan 51
您的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;
}
| 归档时间： |
|
| 查看次数： |
52788 次 |
| 最近记录： |