css - 消除 和 之间的空间？ HTML5

Question

这是我的 CSS:

  header {
    hgroup {
      background: #1F1E1E;
      height: 100px;

      padding: 0px;
      margin: 0px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;

      h1,h2 {
        padding: 0px;
        margin: 0px;
      }
    }

    nav {
      background: #FEFFFE;
      height: 60px;

      padding: 0px;
      margin: 0px;

      -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.2);
      -moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.2);
      box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.2);

      ul {
        list-style: none;
        padding: 0px;

        li {
          float: left;
          padding: 20px 30px 20px 0px;
        }
      }
    }
  }

这是我的 HTML:

<header>
    <hgroup>
        <h1>Lorem Ipsum</h1>
        <h2>Lorem ipsum dolor sit amet.</h2>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <div class="clearfix"></div>
</header>

最终结果是这样的:

如您所见，hgroup 和nav 标记之间存在间隙。我似乎无法弄清楚如何删除它。我已经尝试将 padding: 0px; 和 margin: 0px; 放在几乎所有我认为会删除的地方，但无济于事。我能做什么？

如果你问为什么我的 CSS 结构是这样的，那是因为我使用了 LESS .

Answer 1

您的 ul 可能有边距，请尝试向其中添加 margin:0 :)