Question

我不知道为什么我的无序列表的背景长度超出应有的长度。我对网站开发还很陌生，所以如果你发现我做错了什么，请告诉我。这就是它的样子：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;
}

Answer 1

这是因为你有CSS为每个<li>添加一堆填充。确切地说是40px。这意味着您要为每个<li>在顶部，右侧，底部和左侧放置40px。所以它在高度上增加了80px。它导致边界延伸到整个高度。

作为修复，您可以将 ~~padding:40px;~~ 更改为padding: 8px 40px;。这是CSS短手设置padding-top＆amp;每个padding-bottom到8px。然后是padding-right＆amp;每个padding-left到40像素。

我不确切地知道你在这里想要去做什么，但我不建议使用这么多的填充物。我建议至少从px更改为%，这样在不同的屏幕尺寸或较小的浏览器窗口时 - 它不会完全打破您的布局。

Answer 2

您的<div id="navBarBlack"></div>在<ul>

之前结束

在</div>之后移动结束<ul></ul>，以便它封装导航。

Answer 3

li代码的高度为80px加1em。边界延伸整个长度。尝试将li代码的填充设置为padding: 4px 40px;，然后查看会发生什么。稍微使用这些值。

Answer 4

我正在玩你的代码，这里有一些指示：

在菜单的ul或li上添加背景颜色
在菜单项上使用display inline-block或float left，并计算每个项目的宽度百分比。
查看box-sizing：border-box。这将为您节省很多麻烦
不要使用ID来设置元素的样式。 ID是javascript。始终使用班级

。最后我正在玩的代码告诉你我改变了什么：

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

背景右高度？（CSS）

4 个答案:

背景右高度？ （CSS）

4 个答案:

背景右高度？（CSS）