logo标签列表

从页面中移除边距

htmlcss
3

我想建立一个导航栏，但是我在实现删除边距的解决方案时遇到了问题，但它只从我的主页中删除了边距。

我尝试了一些建议，包括这个问题中排名最高的建议，但仍然没有用。

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>

这里是我的网站链接：https://jekyll-mikehovet.c9.io/index.html，还有一个JSFiddle链接：http://jsfiddle.net/BradleyIW/f5sh8usj/

我对网站开发还比较新手，所以非常感谢任何帮助！^^

你是否在每个页面中都包含导航的CSS？如果它在你的主页上有效，但在其他页面上无效，那么要么你没有使用相同的CSS，要么非主页页面有其他覆盖CSS的CSS。 - APAD1
1
我正在使用Jekyll，所以我的CSS和HTML框架会自动加载到每个页面上。 :/ - Mike Hovet
刚刚查看了现场网站，问题出在H1标签的边距上。 - APAD1
谢谢@APAD1！问题解决了！但我很好奇，正文中的h1标签如何影响页眉的边距？ - Mike Hovet
1
没问题！基本上发生的事情是您浮动了标题，浏览器将浮动元素视为高度为0，因此您的H1的边距将标题推向下方。对于标题来说，实际上没有必要浮动它，因为它是100％宽度，但是您将来可能会再次遇到此问题。解决此问题的另一种方法（如果需要浮动元素）是使用 clearfix，您可以在此处阅读有关此主题的更多信息。 - APAD1
1个回答
2

将你的

CSS中的float:left删除，问题应该就能解决了。当你浮动一个元素时，它会将其从DOM结构中移除，因此即使

不是
的一部分，

标记的边距仍会被应用在
上方。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接