1

这是我的 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。

4

1 回答 1

0

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

于 2012-10-16T05:44:44.467 回答