HTML/CSS - 导航栏拉伸/填充背景颜色答案

【问题标题】：HTML/CSS - Navigation bar stretch/fill background colorHTML/CSS - 导航栏拉伸/填充背景颜色
【发布时间】：2016-07-24 13:34:41
【问题描述】：

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

我已经构建了一个内联导航栏，但是当我想改变它的背景颜色它不会影响我想要着色的高度。我想知道我是否可以对此采取措施但也不能影响导航栏的大小或样式

图片（我为此使用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>

【问题讨论】：

你必须设置.nav元素的高度。
您已删除填充，但未删除边距。背景适用于填充，但不适用于边距，尝试将边距重置为 0 并添加一些顶部/底部填充
设置导航元素的高度样式。
@Stu 你真的很有帮助我更改了padding : 20px 0 20px 0; 并添加了margin : 0px;，但是更改了 height 它只会破坏我页面的风格。非常感谢

标签： javascript html css navbar nav

【解决方案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>

【讨论】：

我相信你的回答更好更干净，会删除我的
@nicael 正如@Stu 所说，但就我而言，我将其更改为padding : 20px 0 20px 0;