我试图让我的导航栏扩展到页面的其余部分，但不知何故它看起来像这样:current navigation bar .
另外，你可以看到顶部和侧面有一个白色的边框，有什么办法可以解决吗？我尝试了各种方法，但它没有改变。任何帮助将不胜感激!
HTML 和 CSS 代码:
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Lora);
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
body {
margin: 0px;
padding: 0px;
}
.nav-bar-block {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #F8F8F8;
background-size: cover;
border-bottom: 1px;
border-bottom-color: dimgray;
display: inline-block;
}
.nav-bar-block h1 {
text-align: center;
font-family: Lora, sans-serif;
color: #4b4b4b;
font-size: 45px;
padding: 0px 400px;
}
.nav-bar-menu {
list-style-type: none;
}
</style>
</head>
<body>
<div class="nav-bar-block">
<h1>Title</h1>
</div>
</body>
</html>
最佳答案
如果将 .nav-bar-block 更改为
display: block;
然后您将获得顶部的全宽(内联 block 表示内容显示在元素旁边，但 block 表示它们将占据整行内容)。
body {
margin: 0px;
padding: 0px;
}
.nav-bar-block {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #F8F8F8;
background-size: cover;
border-bottom: 1px;
border-bottom-color: dimgray;
display: block;
}
.nav-bar-block h1 {
text-align: center;
font-family: Lora, sans-serif;
color: #4b4b4b;
font-size: 45px;
padding: 0px 400px;
}
.nav-bar-menu {
list-style-type: none;
} <html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Lora);
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
</style>
</head>
<body>
<div class="nav-bar-block">
<h1>Title</h1>
</div>
</body>
</html>关于html - 导航栏不会延伸到网页边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39108429/