Высота фона справа? (CSS)

0

Я не знаю, почему длина моей длины фона для моего неупорядоченного списка длиннее, чем должно быть. Я все еще новичок в разработке веб-сайтов, поэтому, если вы видите, что я делаю что-то неправильно, сообщите мне. Вот как это выглядит: 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;
}
Теги:

4 ответа

3
Лучший ответ

Это потому, что у вас есть CSS, чтобы добавить кучу отступов для каждого <li>. Точнее, 40 пикселей. Это означает, что вы накладываете 40px сверху, справа, внизу и слева для каждого <li>. Таким образом, он добавляет 80 пикселей к высоте. И это заставляет границу расширять эту полную высоту.

Так как исправление, вы можете изменить padding:40px; для padding: 8px 40px; , Это короткая рука CSS для установки padding-top & padding-bottom на 8px каждый. А затем padding-right & padding-left до 40 пикселей каждый.

Я точно не знаю, что вы пытаетесь сделать здесь, но я бы не рекомендовал использовать так много дополнений. Я бы рекомендовал, по крайней мере, изменить с px на %, таким образом, когда на другом экране или в меньшем окне браузера - он полностью не сломает ваш макет.

  • 0
    Спасибо! Это сработало :)
0

Ваш <div id="navBarBlack"></div> закрывается перед <ul>

Переместите закрывающий </div> после <ul></ul> чтобы он инкапсулировал навигацию.

  • 0
    Вы можете расширить свой ответ, добавив пример части, которая исправила код ОП.
0

Я играл с вашим кодом, и вот несколько указателей:

  1. добавить цвет фона на ul или li меню
  2. используйте встроенный блок отображения или поплавок слева от пунктов меню и подсчитайте, какая ширина каждого элемента будет в процентах.
  3. Посмотрите на размер коробки: border-box. Это избавит вас от головной боли
  4. Не используйте идентификаторы для стилизации вашего элемента. Идентификаторы - это javascript. Всегда используйте классы

Наконец, код, с которым я играл, чтобы показать вам, что я изменил:

http://codepen.io/nighrage/pen/CFdGK

0

Высота ваших тегов li составляет 80px плюс 1em. Граница простирается на всю длину. Попробуйте настроить padding: 4px 40px; ваших тегов li на padding: 4px 40px; и посмотрим, что произойдет. Поиграйте с этими значениями немного.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню