HTML/CSS - 导航栏 stretch/fill 背景颜色

Question

到目前为止，我的问题是关于页面样式化。

我构建了一个内联导航栏，但是当我想改变它的背景颜色时它不会影响我的高度想上色。我想知道我是否可以对此做点什么但也不会影响我的导航栏的大小或样式

图片（为此我使用 background-color : green;）：

body{
  margin : 0;
  padding : 0;
  font-family : 'Arial',serif;
}

/*nav class  */
.nav {
  background-color : green;
  color: white;
  list-style : none;
  text-align : right;
  padding : 0px 0 0px 0;
}

/*A li tag in a .nav class*/
.nav > li {
  display : inline-block;
  padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
  font-size: 14px;
}

/*a tag inside a li tag inside a .nav class*/
.nav > li > a { 
  text-decoration : none;
  color: black;
}

/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
  color : #c1c1c1;
}

.logo {
  float : left;
  padding-left : 25px;
}

.logo > .logo-image {
  position: relative;
  bottom : 8px;
  width : 128px;
}

.banner {
  width : 100%;
  display : block;
}

.banner  > .banner-image{
  width : 100%;
  display : block ;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>DeckArts Graphics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <ul class="nav">
      <div class="logo">
        <a class="logo-image" href="#home">
          <img  src="ZE.png" >
        </a>
      </div>

      <li><a href="#Home">Home</a></li>
      <li><a href="#Gallery">Gallery</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#About">About</a></li>
    </ul>

    <div class="banner">
      <img class="banner-image" src="banner.jpg" >
    </div>
  </body>
</html>

Answer 1

重置边距并对导航应用填充即可。

具体来说，

将padding : 0px 0 0px 0;更改为padding : 10px 0 10px 0;
添加margin:0px.

下面的演示。

body{
  margin : 0;
  padding : 0;
  font-family : 'Arial',serif;


}
/*nav class  */
.nav {
  background-color : green;
  color: white;
  list-style : none;
  text-align : right;
  padding : 10px 0 10px 0;
  margin:0px;
}
/*A li tag in a .nav class*/
.nav > li {
  display : inline-block;
  padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
  font-size: 14px;



}
/*a tag inside a li tag inside a .nav class*/
.nav > li > a { 
  text-decoration : none;
  color: black;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
  color : #c1c1c1;
}
.logo {

  float : left;
  padding-left : 25px;
}
.logo > .logo-image {

  position: relative;
  bottom : 8px;
  width : 128px;
}
.banner {
  width : 100%;
  display : block;
}
.banner  > .banner-image{
  width : 100%;
  display : block ;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>DeckArts Graphics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <ul class="nav">
      <div class="logo">
        <a class="logo-image" href="#home">
          <img  src="ZE.png" >
        </a>
      </div>

      <li><a href="#Home">Home</a></li>
      <li><a href="#Gallery">Gallery</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#About">About</a></li>
    </ul>

    <div class="banner">
      <img class="banner-image" src="banner.jpg" >
    </div>
  </body>
</html>

HTML/CSS - 导航栏 stretch/fill 背景颜色

HTML/CSS - Navigation bar stretch/fill background color

html

javascript

css

nav

navbar