Question

试图更改标题背景颜色，但未更改，整个身体都有红色，我只想更改未发生的标题部分背景颜色

请有人告诉我出了什么问题

<html>
  <head>
    <metadata name="viewport" content="width=device-width"/>
    <metadata charset="utf-8"/>
    <metadata name="keywords" content="vasu">
  <style>
    body{
        background-color:red;
        width: 100%;
        height: 100%;
    }
    header {

        color: white;
        height: 80%;
        width: 90%;
        background-color:yellow;   --- need to changee color , not happening
    }
    header h1{
        float : left;
        padding : 0;
    }
    header ul{
        float : right;
        padding:0;

    }
  </style>
  </head>
    <body>
          <header>
            <div class="container">
            <div id="logo">
              <h1>ACME WEB DESIGN</h1>
            <nav>
              <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Hostel</a></li>
                <li><a href="">Company</a></li>
              <ul>  
            </nav>
             </div> 
             </div>

          </header>

          <section>
          </section>
           <footer>
           </footer>
    </body>

</html>

Answer 1

它对我有用，但是有一个小错误，您没有关闭ul

         <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Hostel</a></li>
            <li><a href="">Company</a></li>
          </ul>  //here you forgot to close
        </nav>

Answer 2

似乎所有内容都在浮动时，容器的高度为零，因此您看不到背景。当我更改以下行时，它对我有用：

header h1{
    float : left;
    padding : 0;
}
header ul{
    float : right;
    padding:0;

}

对此：

 header h1 {
   display:inline-block;
   width:74%;
   padding: 0;
 }

 header nav {
   display:inline-block;
   width:24%;
   padding: 0;
 }

无法更改标题的背景颜色

2 个答案: