Question

我正在学习HTML和CSS，并尝试使用我所理解的任何内容来构建网页。我正在尝试在左上方创建的“此网站”按钮出现问题。我希望它居中（水平），我需要大约20px的顶部填充（50px是代码中的代表值）。更改此值后，对外观没有任何影响。我该如何解决？这是代码。

<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0;padding:0;}
div.topbar {
background-color: #f44336;
height: 50px;  
}
a.left-top-bar {
background-color: #000000;
color: white;
font-size: 25px;
padding-top:50px
padding-bottom: 10px;
font-family: ISOCPEUR;
text-align: center;
}
nav.sidenav {
background-color: #a4a4a4;
width: 200px;
height: 500px;
padding-top: 15px;
font-family: Calibri;
color: white;
font-size: 20px;
float: left;
text-align: center;
line-height: 45px;
}
a.nav:link, a.nav:active, a.nav:visited {
text-decoration: none;
color: white;
background-color: #949494;
padding: 2px 10px 2px 10px;
border-style: solid;
border-color: #000000;
border-width: 2px;
border-radius: 10px;
}
a.nav:hover {
text-decoration: none;
background-color: #292929;
}

section.center {
background-color: #000000;
color: white;
}

a.topbar:link, a.topbar:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Calibri;
}

a.topbar:hover, a.topbar:active {
background-color: red;
}
a.image:hover {
background-color: red;
</style>
</head>
<body>
<div class="topbar">
<a class="left-top-bar">This Website</a>
</div>
<nav class="sidenav">
<a class="nav" href="https://www.wikipedia.org" target="_blank">Home</a><br> <a      class="nav" href="https://www.google.com" target="_blank">About Us</a>

</nav>
<section class="center">
<p>Information</p>
</section>


</body>
</html>

Answer 1

https://jsfiddle.net/xgofzs55/

我为你做了这个小提琴

使用

Position:absolute;

Answer 2

这是我所做的，但不只是复制它阅读它并研究如何制作网站HTML，CSS

div.topbar {
  background-color: #f44336;
  font-size: 25px;
  height: 70px;
  font-family: ISOCPEUR;
  // remove next line to see the difference...
  position: relative;  //when element is relative positioned the childs will be constrained to the parent no to the body or greather relative parent
}

a.left-top-bar {
  background-color: #0e0e0e;
  color: whitesmoke;
  padding: 20px;
  position: absolute;  // check if you need to add relative in the parent
}

参考的好网站是：

HTML和CSS：填充辅助

2 个答案: