Я не знаю, почему длина моей длины фона для моего неупорядоченного списка длиннее, чем должно быть. Я все еще новичок в разработке веб-сайтов, поэтому, если вы видите, что я делаю что-то неправильно, сообщите мне. Вот как это выглядит: http://gyazo.com/a2875f082f6a1424cf8be6d9ecdf100d Код HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="indexCSS.css" rel="stylesheet" type="text/css"/>
<title>First webpage</title>
</head>
<body>
<div id="navBarBlack"></div>
<ul id="navBar">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
<li><a href="#">Page 6</a></li>
<li><a href="#">Page 7</a></li>
<li><a href="#">Page 8</a></li>
</ul>
<p id="header">Webpage</p>
</body>
</html>
CSS:
#header {
text-align: center;
font-size: 50px;
font-weight: lighter;
font-family: sans-serif;
color: #818181;
margin-top: 30px;
position: relative;
padding-top: 10px;
}
body {
background-color: #F2F2F2;
}
#navBar li {
text-decoration: none;
list-style: none;
display: inline;
padding: 40px;
border-right: thin solid white;
}
#navBar li:first-child{
border-left: thin solid white;
}
#navBarBlack{
text-align: center;
background-color: #212121;
height: 30px;
float: none;
margin-top: -7px;
width: 2000px;
align-self: center;
margin-left: -70px;
}
#navBar{
text-align: center;
float: none;
margin-top: -27px;
}
#navBar li a {
text-decoration: none;
}
#navBar li a:visited {
color: #8A8A8A;
}
#navBar li a:link {
color: #8A8A8A;
}
#navBar li a {
-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
#navBar li a:hover {
color: white;
}
Это потому, что у вас есть CSS, чтобы добавить кучу отступов для каждого <li>
. Точнее, 40 пикселей. Это означает, что вы накладываете 40px сверху, справа, внизу и слева для каждого <li>
. Таким образом, он добавляет 80 пикселей к высоте. И это заставляет границу расширять эту полную высоту.
Так как исправление, вы можете изменить для padding:40px;
padding: 8px 40px;
, Это короткая рука CSS для установки padding-top
& padding-bottom
на 8px каждый. А затем padding-right
& padding-left
до 40 пикселей каждый.
Я точно не знаю, что вы пытаетесь сделать здесь, но я бы не рекомендовал использовать так много дополнений. Я бы рекомендовал, по крайней мере, изменить с px
на %
, таким образом, когда на другом экране или в меньшем окне браузера - он полностью не сломает ваш макет.
Ваш <div id="navBarBlack"></div>
закрывается перед <ul>
Переместите закрывающий </div>
после <ul></ul>
чтобы он инкапсулировал навигацию.
Я играл с вашим кодом, и вот несколько указателей:
Наконец, код, с которым я играл, чтобы показать вам, что я изменил:
Высота ваших тегов li
составляет 80px плюс 1em. Граница простирается на всю длину. Попробуйте настроить padding: 4px 40px;
ваших тегов li
на padding: 4px 40px;
и посмотрим, что произойдет. Поиграйте с этими значениями немного.