0
У меня возникли проблемы с центрированием навигационных элементов. Точная проблема заключается в том, что слева есть немного пробелов, которые не отвечают на мой :hover, а также мой список центров с text-align:center на моем nav!Центрирование списка навигации
\t \t \t /* CORE ELEMENTS */
* {
\t margin: 0;
\t font-family: "Open Sans", Times New Roman;
\t font-size: 1em; /* 16px is standaard, als je bv. 24px wilt doe je dus 24/16 = 1.5em */
}
html, body{
\t height: 100%;
\t margin: 0 auto;
}
footer{
\t /**/
}
header{
}
\t \t \t /* PSEUDO-CLASSES */
a:link {
}
a:visited {
}
a:hover {
\t color: #F9F9F9;
}
a:active { \t
\t color: #171717;
background-color: #F9F9F9;
}
nav ul li:hover {
background-color: lightblue;
}
\t \t \t /* STYLE ELEMENTS */
h1 {
\t font-size: 2em;
}
h2 {
\t font-size: 1.8em;
}
img {
\t display: block;
}
\t \t \t /* NAV, UL, LI, A */
nav {
\t clear: both;
\t background-color: #F9F9F9;
\t text-align: center;
}
nav ul li{
\t list-style-type: none;
\t line-height: 5vh;
\t width: 33vw;
\t display: table-cell;
}
ul {
\t border: 1px solid #EEEEEE;
}
a {
\t text-decoration: none;
\t color: black;
}
\t \t \t /* HTML ELEMENTS */
section {
height: 100vh;
}
section:nth-child(1) {
background: lightblue;
}
section:nth-child(2) {
background: lightgreen;
}
section:nth-child(3) {
background: purple;
}
section:nth-child(4) {
background: red;
}
section:nth-child(5) {
background: yellow;
}
\t \t \t /* CLASS & ID */<h1>WhiteWizard</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Не могли бы вы воспроизвести проблему в [скрипке] (http://jsfiddle.net/) – Lal
, почему у вашего 'li' есть стиль' display: table-cell; '? – zgood
Вы также можете отправить только соответствующую часть вашего styles.css в свой вопрос. «Stupid website» не позволяет задавать вопросы с тысячами строк кода;) –