0
我一直在爲我的網站創建一個簡單的側邊欄。我想把40pxmargin放在我的主表旁邊，所以它看起來不像它是側邊欄的一部分。爲什麼我的保證金不起作用？
我也試圖把一個<div>圍繞主區和樣式像這樣：
margin: 40px;
我也有在路上的導航欄。 （如果你想在導航欄中縮小字體，我很好。）我該怎麼做？
全部代碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Open Sans;
margin: 40px;
}
.dateOfPost {
font-weight: bold;
text-decoration: underline;
}
form {
border: 1px solid #000;
width: 270px;
height: auto;
float: left;
}
#cssmenu ul {
background: #f96e5b;
width: auto;
list-style: none;
float: right;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
font-size: auto;
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
</style>
<script>
</script>
</head>
<body>
<noscript>
<p>Please enable Javascript before viewing this page or else some elements may not appear and/or function properly.</p>
</noscript>
<div id="sidebar">
<form id="signUp">
<p>
<b>Hey! </b>Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D
<br />
<br />Nickname:
<input type="text" id="nickname" placeholder="Nickname" required>
<br/>Email Address:
<input type="text" id="email" placeholder="Email Address" maxlength="254" required>
<br />Password:
<input type="password" id="password" placeholder="Password" required>
<br />
<input type="button" value="Submit" onclick="confirmAccount">
</p>
</form>
</div>
<div class="rightColumn">
<h1>Ryan Zhang's Blog</h1>
<div id="cssmenu">
<ul>
<li class="active"><a href="home.html"><span>Home</span></a>
</li>
<li><a href="aboutMe.html"><span>About Me</span></a>
</li>
<li><a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
</li>
<li><a href="inspiration.html"><span>Inspirational Quotes and Words</span></a>
</li>
<li><a href="timeline.html"><span>Timeline of Me</span></a>
</li>
<li><a href="contact.html"><span>Contact</span></a>
</li>
</ul>
</div>
<hr />
<p>
Lorem Ipsum
<br />Upload Date:
<br />
<date>25/10/15</date>
</p>
<hr />
</div>
</body>
</html>
「我想提出一個40像素保證金我旁邊的主桌......」沒有表。 「所以它看起來不像它是側邊欄的一部分。」側邊欄是什麼意思？你需要非常具體或沒有人能夠正確回答。 – wazz
你明白了嗎？ –
'onclick =「confirmAccount」'看起來像是什麼都不做的代碼。 – Xufox