Question

我正在尝试构建导航栏，但是我无法实现删除边距的解决方案，但它只会从我的主页中删除它。我已经尝试了这些建议，包括来自this question的评价最高的建议，但仍然没有。

CSS：

/**********************************
HEADING
**********************************/

header {

  float: left;

  margin: 0 0 30px 0;

  padding: 5px 0 0 0;

  width: 100%;

  background-color: #f00;

}

#logo {

  text-align: center;

  margin: 0;

}

/**************************
GENERAL
**************************/

body {

  background-color: grey;

  margin: 0;

  padding: 0;

}

a {

  text-decoration: none;

}

/**********************************
NAVIGATION
**********************************/

nav {

  text-align: center;

  padding: 10px 0;

  margin: 20px 0 0;

  background-color: #fff;

}

nav ul {

  list-style: none;

  margin: 0 10px;

  padding: 0;

}

nav li {

  display: inline-block;

}

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AP World</title>
  <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

  <link rel="stylesheet" href="/css/main.css">
  <link rel="canonical" href="http://yourdomain.com/">
</head>


<body>

  <header>
    <a href="" id="logo">
      <h1>AP World</h1>
    </a>
    <nav>
      <ul>
        <li><a href="/index.html">Home</a>
        </li>
        <li><a href="/songs">Songs</a>
        </li>
        <li><a href="/virgins">Virgins</a>
        </li>
      </ul>
    </nav>
  </header>

  <div class="page-content">
    <div class="wrapper">
      Homepage
    </div>
  </div>



</body>

</html>

Here is a link to my site.和link to a JSFiddle

我对网络开发有点新意，所以非常感谢任何帮助！ ^^

Answer 1

从float:left CSS中删除header，它应该可以解决问题。浮动元素时，它会将其从DOM结构中取出，因此即使H1不是标题的一部分，H1标记的边距也会应用于标题上方。

从页面中删除边距

1 个答案: