html - 如何设置此栏的背景

Question

我正在尝试将背景设置为水平穿过此栏以位于 Logo 和导航的后面

这是HTML

<!--NAV-->
<div class="header">
    <div class="title">
        <img src="img/logo.png">
    </div><!--/.title-->
    <nav class="nav">
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>
</div>

这是CSS

.title
{
  display:inline;
  float:left;
  margin:0 auto;
}

.nav
{
  font-size:20px;
  color:#0F3;
  display:inline;
  float:right;
  margin:0 1.7%;
  padding:1% 4% 0;
}

ul
{
  display:inline;
  float:right;
  list-style:none;
}

li
{
  display:inline;
}

Answer 1

可以修改.header类。

请记住， float div 不会影响周围元素的大小。因此，您可以在 header 类中使用 overflow: auto; 使周围元素考虑 float 元素:

例子

.header {
  background: url(http://lorempixel.com/800/100/abstract/);
  width: 100%;
  overflow: auto; 
}
img {
  padding: 12px;
}
.title {
  display: inline;
  float: left;
  margin: 0 auto;
}
.nav {
  font-size: 20px;
  color: black;
  text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
  display: inline;
  float: right;
  margin: 0 1.7%;
  padding: 0 4%;
  padding-top: 1%;
  margin-bottom: 0;
}
ul {
  display: inline;
  float: right;
  list-style: none;
}
li {
  display: inline;
}

<div class="header">
  <div class="title">
    <img src="http://lorempixel.com/100/40/people/">
  </div>
  <!--/.title-->
  <nav class="nav">
    <ul>
      <li>Home</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>