Question

我只是学习CSS和HTML，并决定去制作一个模拟网站。我在边框没有遇到顶栏的末端时遇到了麻烦。其他时候我已经过去了。

#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;

您可以在上面的链接中看到这一点。如果你能向我解释为什么会这样，以及我将来如何避免它，我将非常感激。

Answer 1

从父级删除填充。

这阻止它达到顶峰。

#topbar {
background-color: #2A4F6E;
width: 100%;
height: 50px;
padding: 0px 0 0px 0;
margin: 0;
}

Answer 2

好的，因为你说你刚开始使用HTML和CSS，我在你的代码中改变了一些。

目前你的fixedwith div对代码没有影响（也许你在整个网站上使用它）。
您在整个顶部栏上应用了背景，HTML-wise也包含您的菜单点，假设您只希望标题具有蓝色背景我将该属性交换为h1-tag。通过此更改，边框线与标题重叠，这应该可以完成工作。

new JSFiddle

* {
    margin:0;
    padding:0;
}
body {
    margin: 0;
    font-family: arial, helvetica, sans-serif;
}
a {
    text-decoration: none;
    color: white;
}
a:hover {
    text-decoration: underline;
}
#topbar {
    float:left;
    width:100%;
    height:100%;
    overflow:hidden;
}

#topbar h1 {
    display: block;
    width:100%;
    height:100%;
    background-color: #2A4F6E;
    padding: 7px 50px 7px 40px;
    margin: 0;
    color: white;
    float: left;
    border-right: solid #3E6F87 1px;

}

#topnav {
    float:left;
    width:100%;
    height:50px;
    background:#ccc;
}
#topnav li {
    float: left;
    margin: 0;
    padding: 16px 10px 10px 20px;
    list-style: none;
    color: white;
    font-size: 1.2em;
    border-right: solid #3E6F87 1px;
}
#topnav ul {
    margin: 0;
    padding: 0;
}
#topnav a:hover{
    color: #A97437;
}

<body>
    <div id="container">
        <div id="topbar">
            <div class="fixedwidth">
                <h1>Neil's Tech Reviews</h1>
                <div id="topnav">
                    <ul>
                        <li><a href="#"> Home</a></li>
                        <li><a href="#"> Reviews</a></li>
                        <li><a href="#"> Forum</a></li>
                        <li><a href="#"> Partners</a></li>
                        <li><a href="#"> About</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

CSS右边界不合适

2 个答案: