【问题标题】：Background color for nav bar导航栏的背景颜色
【发布时间】：2016-03-23 08:11:18
【问题描述】：

我对 HTML/CSS 非常陌生，在构建和着色导航栏时遇到了麻烦。我有两个问题。

我的菜单项位于 ul 列表中，并且它们是内联显示的，但如果屏幕宽度发生变化，我需要它们自动将它们自己构建在一个块中。
我需要将“Adoptly”的背景颜色更改为红色。我只能为单词着色或手动设置样式，这在边距更改时不起作用。

这是我的代码目前的样子：

HTML：

<div class="header">
  <div class="container">
    <ul> 
      <li>Adoptly</li> 
      <li>About</li> 
      <li>Animals</li> 
      <li>Blog</li> 
      <li>Events</li> 
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
  </div>
</div>

<div class="supporting">
  <div class="container">
  </div>
</div>

<div class="footer">
  <div class="container">
  </div>
</div>

CSS：

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}

.header { 
  background-color: rgb(48, 98, 126);
  height: 75px;
}

.header li { 
  display: inline; 
  list-style-type: none;
  color: white; 
  font-size: 25px; 
  margin-left: 20px;
}

.header ul { 
  margin-top: 20px;
  margin-bottom: 0;
}

.header li:first-child {
  background-color: red; 
}

@media (max-width: 500px) {
  ul li {
    width: 100%;
  }
}

这就是导航栏的外观（忽略导航栏以外的所有内容）：https://s3.amazonaws.com/codecademy-content/projects/adoptly/index.html

感谢您的帮助，

乔什

【问题讨论】：

请在您的问题中发布完整的代码示例。

标签： html css

【解决方案1】：

1) 您可以通过将当前的媒体查询调整为：

@media (max-width: 500px) {
  .header li {
    display:block;
  }
}

2) 您可以通过将 LI 设置为 inline-block 并将高度和 line-height 更改为 75px 以匹配标题高度来做到这一点。您还需要从 UL 中删除上边距，并将 UL height 设置为 75px。

.header li { 
  display: inline-block; 
  list-style-type: none;
  color: white; 
  font-size: 25px; 
  margin-left: 20px;
  height:75px;
  line-height:75px;
}

.header ul { 
  height:75px;
  margin-bottom: 0;
}

Bootply example

【讨论】：

【解决方案2】：

这里有一个小例子，使用 % 比使用 PX 更好，用于响应式设计，并使用 HTML5 标签。

       html,
       body {
         margin: 0;
         padding: 0;
         font-family: 'Montserrat', sans-serif;
       }
       .container {
         display: block;
         position: relative;
         left: 20%;
         /* center responsive */
         max-width: 60%;
         width: 100%;
         /* Better work with % for responsive design */
         height: auto;
         margin: 0;
       }
       header {
         display: block;
         position: relative;
         background-color: rgba(48, 98, 126, .9);
         /* .9 opacity of color ;) */
         height: 75px;
       }
       ul {
         display: block;
         position: relative;
         height: 75px;
         line-height: 75px;
         list-style: none;
         max-height: 75px;
       }
       ul li {
         color: white;
         float: left;
         padding: 0 2rem;
       }
       .item-red {
         background-color: red;
       }
       /*
          MEDIASCREEN
          */
       @media screen and (max-width: 1700px) {
         .container {
           left: 15%;
           /* center responsive */
           max-width: 70%;
         }
       }
       /* End media screen */
       @media screen and (max-width: 1500px) {
         .container {
           left: 10%;
           /* center responsive */
           max-width: 80%;
         }
       }
       /* End media screen */
       @media screen and (max-width: 1400px) {
         .container {
           left: 7.5%;
           /* center responsive */
           max-width: 85%;
         }
       }
       /* End media screen */
       @media screen and (max-width: 980px) {
         .container {
           left: 0;
           /* center responsive */
           max-width: 100%;
         }
         ul {
           height: auto;
           line-height: auto;
           list-style: none;
           max-height: 100%;
         }
         ul li {
           background: #CCCCCC;
           display: block;
           float: none;
         }
       }
       /* End media screen */

<!DOCTYPE html>
<html lang="es-ES">

<head>
  <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <div class="container">
      <ul>
        <li class="item-red">Adoptly</li>
        <li>About</li>
        <li>Animals</li>
        <li>Blog</li>
        <li>Events</li>
      </ul>
    </div>
  </header>

  <main>
    <div class="jumbotron">
      <div class="container">
      </div>
    </div>

    <div class="supporting">
      <div class="container">
      </div>
    </div>
  </main>

  <footer>
    <div class="container">
    </div>
  </footer>

</body>

</html>

【讨论】：

【解决方案3】：

如上所示为单词adoptly创建一个类。让我们称之为.main。在 .main 类中，您将处理背景颜色和颜色，然后使用各个边的填充来获得正确的比例

一旦你处理了边距，一切都会看起来很均匀。

这里可以解决问题。

    .main {
  color:white;
  background-color: #e52364;
  font-size: 28px;
  padding: 22px 32px 22px 32px;
}

【讨论】：