个人中心
gpt4 book ai didi

html - 导航栏没有完全覆盖

转载 作者：太空宇宙 更新时间：2023-11-03 19:35:37 24 4
gpt4 key购买 nike

我正在尝试让我的导航栏覆盖所有右侧，如图所示。我想不通。我尝试了一切，但仍然无法弄清楚。任何建议表示赞赏。

<!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 &copy; 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 &copy; 2016
      </footer>
    </div>
  </body>
</html>

关于html - 导航栏没有完全覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55425879/

24 4 0
文章推荐： c# - DataTable into List *without* where T : class, new() - 潜在问题？
文章推荐： C# 2005 控制台应用程序始终需要提升的权限
文章推荐： c# - 在 C# 中使用引用项目引用的类型
文章推荐： javascript - 导航栏，响应式导航有问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com