Прежде всего, я знаю, что этот вопрос задан МИЛЛИОН раз... и я посмотрел этот конкретно, а также несколько других на этот сайта и других сайтов. Я пробовал тонну различных вариантов на каждом из них и до сих пор не могу заставить его работать.
Я пытаюсь сосредоточить неупорядоченный список. Он отображается правильно, он просто не центрирован. На данный момент он ЗАКРЫТ к центру... но если вы измените параметр "ширина" в коде .nav-container в CSS, то он сдвинет положение 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, когда я его тестирую.