Question

出于某种原因，虽然我确实有padding: 0;和margin: 0;，但div总是位于浏览器的顶部，而不是触及它。

以下是代码：

html,
body {
  margin: 0;
  padding: 0;
}

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Forums</li>
		<li>Contact</li>
	</ul>
</div>

</body>
</html>

我真的不知道我做错了什么。非常感谢额外的帮助。

Answer 1

您可以通过添加ul{ margin: 0 }

来解决此问题

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.nav > ul {
  margin: 0;   /* Try to add this */
}

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Forums</li>
		<li>Contact</li>
	</ul>
</div>

</body>
</html>

＆＃13;

Answer 2

级联样式表采用最低的浏览器内置数字。

Chrome已

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

。

所以你需要超越它。

ul{margin:0}

然后取<style>。

最高权威得到inline-css。

important!中的<style>再次覆盖了这一点。

https://developer.mozilla.org/de/docs/Web/CSS/Cascade

CSS / HTML：标题不触及屏幕顶部

2 个答案: