HTML和CSS：填充協助
[英]HTML and CSS: Padding Assistance
問題描述
我正在學習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>
2 個解決方案
解決方案1
1 2016-05-31 11:36:01
解決方案2
1 已采納 2016-05-31 11:58:02
這是我所做的，但是不僅僅復制它，還要閱讀它，並且更多地研究如何制作網站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電子郵件單元格填充輔助
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.