我正在尝试让我的导航栏覆盖所有右侧，如图所示。我想不通。我尝试了一切，但仍然无法弄清楚。任何建议表示赞赏。
<!doctype html>
<html lang="en">
<head>
<title>
Lighthouse Island Bistro
</title>
<link rel="stylesheet" type="text/css" href="tes.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffe</h2>
<p>Indulge in the aroma of freshly ground coffe. Speciality drinks are
available hot or cold</p>
<h2>Speciality Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicios wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables.</p>
<h2>Panoramic View</h2>
<p>Take in some scenery! <br> The top of our lighthouse offers a
panoramic view of the countryside. Challenge your friends to climb our
100-stair tower.</p>
</main>
<footer>
Copyright © 2016
</footer>
</div>
</body>
</html>
这是我的 CSS:
body
{
background-color: #010d91;
margin: 0;
}
#wrapper
{
width: 80%;
margin: 0 auto;
background-color: white;
color: black;
}
h1
{
font-size: 50px;
text-align: center;
}
header
{
background-color: #5995f7;
padding: 10px 10px 10px 10px;
}
nav
{
float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em;
}
main
{
padding:10px 20px;
color: #000000;
display: block;
overflow: auto;
}
h2
{
color: #869dc7;
}
nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav a
{
text-decoration: none;
padding: 20px;
display: block;
background-color: #89c6ed;
border-bottom: 1px solid #FFFFFF;
}
nav a:link
{
color:#ffffff
}
nav a:visited
{
color: #eaeaea;
}
nav a:hover
{
color: #869dc7;
background-color: #eaeaea;
}
footer
{
text-align: center;
font-style: italic;
font-size: small;
padding-top: 5px;
padding-bottom: 5px;
background-color: #5995f7;
}
我的看起来像这样: https://i.imgur.com/PKaa0W5.png
我希望我的导航栏覆盖整个内容，就像下面这样: https://i.imgur.com/h2navpU.png
最佳答案
我只是对您的代码进行了一些更改，希望它能对您有所帮助。谢谢
包装你的 <nav>和 <main>在 <div id="content-wrapper">并为 content-wrapper 编写 CSS并添加 background-color: #89c6ed;在 nav CSS。
#content-wrapper {
display: flex;
flex-direction: row-reverse;
}
body {
background-color: #010d91;
margin: 0;
}
#wrapper {
width: 80%;
margin: 0 auto;
background-color: white;
color: black;
}
h1 {
font-size: 50px;
text-align: center;
}
header {
background-color: #5995f7;
padding: 10px 10px 10px 10px;
}
nav {
background-color: #89c6ed;
float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em;
}
main {
padding:10px 20px;
color: #000000;
display: block;
overflow: auto;
}
h2 {
color: #869dc7;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding: 20px;
display: block;
background-color: #89c6ed;
border-bottom: 1px solid #FFFFFF;
}
nav a:link {
color:#ffffff
}
nav a:visited {
color: #eaeaea;
}
nav a:hover {
color: #869dc7;
background-color: #eaeaea;
}
footer {
text-align: center;
font-style: italic;
font-size: small;
padding-top: 5px;
padding-bottom: 5px;
background-color: #5995f7;
}
#content-wrapper {
display: flex;
flex-direction: row-reverse;
}<!doctype html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<link rel="stylesheet" type="text/css" href="tes.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<div id="content-wrapper">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffe</h2>
<p>Indulge in the aroma of freshly ground coffe. Speciality drinks are available hot or cold</p>
<h2>Speciality Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicios wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
<h2>Panoramic View</h2>
<p>Take in some scenery! <br> The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our
100-stair tower.</p>
</main>
</div>
<footer>
Copyright © 2016
</footer>
</div>
</body>
</html>关于html - 导航栏没有完全覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55425879/