Question

我不确定为什么，但是导航栏和顶部的横幅图像之间有一个小的间隙。我已经尝试检查是否会在导致该问题的元素上存在某种填充或边距，但是我无法识别出任何错误。

return [
    'user' => 'We can't find a user with that e-mail address.'
];

CSS：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf- 
8"/>
        <meta name="viewport" content="width=device-width, initial- 
scale=1.0"/>
        <title>Pierce Productions</title>
        <link rel="stylesheet" href="reset.css" type="text/css" 
media="screen"/>
        <link rel="stylesheet" href="style.css" type="text/css" 
media="screen"/>
        <script src="scripts\modernizr.min.js"></script>
        <script src="scripts\respond\dest\respond.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">window.jQuery || 
document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"> 
<\/script>')</script>
        <script src="scripts\prefixfree\prefixfree.min.js"></script>
        <script src="scripts\slick\slick\slick.min.js"></script>
    </head>
    <body>
      <header>
        <img src="images\banner.png" class="banner">
        <nav>
          <div class="color">
           <div class="table">
            <ul>
              <li><a class="active" href="main.html">Home</a></li>
              <li><a href="albums.html">Albums</a></li>
              <li><a href="buy.html">Store</a></li>
              <li><a href="about.html">About</a></li>
            </ul>
          </div>
         </div>
        </nav>
      </header>
    </body>
</html>

如何使导航栏与横幅图像齐平？

Answer 1

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

Answer 2

尝试将vertical-align: middle添加到CSS中的图片中，这样可以解决您的问题。

为什么横幅广告图像和导航栏之间存在间隙？

2 个答案: