爲什麼我不能爲我的表單添加邊距？

Question

這是HTML

 <div id="header"> 
     </div> <!-- end header --> 

     <div id="main"> 
      <div id="stylized" class="myform"> 
      <form id="form" name="form"> 
       <label>Name 
       <span class="small">of company, business, etc...</span> 
       </label> 
       <input type="text" name="name" id="name"/> 

       <label>Status Message 
       <span class="small">Max 40 Characters</span> 
       </label> 
       <input type="text" name="statusmessage" id="statusmessage"> 

       <label>URL to Menu 
       </label> 
       <input type="text" name="url" id="url"/> 

       <button type="submit">Submit</button> 
       <div class="spacer"> 
       </div> 
      </form><!-- end form --> 

      <div id="stylized1" class="myform1"> 
       <form id="form1" name="form"> 
       <label>Street Address 
       </label> 
       <input type="text" name="stretaddress" id="streetaddress"/> 

       <label>City 
       </label> 
       <input type="text" name="city" id="city"/> 

       <label>State 
       </label> 
       <input type="text" name="state" id="state"/> 

       <label>ZIP 
       </label> 
       <input type="text" name="zip" id="zip"/> 

       <div class="spacer"> 
       </div> 
       </form><!-- end form1--> 
      </div><!-- end stylized --> 

     </div><!-- end main --> 
    </div><!-- end container --> 

</body> 
    </head> 

這是CSS

#container { 
    margin: auto; 
    width: 800px; 
} 

#header { 
    position: relative; 
    height: 147px; 
    background: url(images/header.png) no-repeat; 
} 

#main { 
    position: relative; 
    height: 653px; 
    background: url(images/main.png) no-repeat; 
} 

#form { 
    color: #c4c1c1; 
    margin: 100px 20px 0px 10px; 
} 

.spacer{ 
    clear:both; 
    height:1px; 
} 

#stylized{ 
    border:solid 2px #c4c1c1; 
} 

#stylized label{ 
    display:block; 
    font-family: arial; 
    font-weight:bold; 
    width:140px; 
    margin: 2px 0 0px 10px; 
} 

#stylized .small{ 
    color:#c4c1c1; 
    display:block; 
    font-size:12px; 
    font-weight:normal; 
    width:140px; 
} 

#stylized input{ 
    float:left; 
    font-size:15px; 
    padding:5px 25px; 
    border:solid 1px #c4c1c1; 
    width:200px; 
    margin:2px 0 20px 10px; 
} 

#stylized button{ 
    clear:both; 
    margin:133px 0 0px 100px; 
    width:125px; 
    height:31px; 
    text-align:center; 
    line-height:3px; 
    color:4b4b4b; 
    font-size:15px; 
    font-weight:bold; 
} 

#stylized1{ 
    position: relative; 
    margin: -1600px 0px 10px 450px; 
} 

上邊距，無論多少次，我改變它，從來沒有正確的座標。每次我改變邊距，它都會直觀地回到同一個地方。怎麼來的？是否因爲寬度爲#container？或者我需要一些代碼？我對此很新。謝謝你的幫助。

#stylized1 label{ 
    display:block; 
    float:left; 
    font-family: arial; 
    font-weight:bold; 
    width:140px; 
    color:#c4c1c1; 
    margin: 2px 0px 0px 10px; 
} 

#stylized1 input{ 
    font-size:15px; 
    padding:5px 25px; 
    border:solid 1px #c4c1c1; 
    width:200px; 
    margin:0px 0px 20px 10px; 
} 

Answer 1

切割和粘貼是你的敵人。我懷疑你想要重複的表格，一個或每個表格條目的一半。此外，你正在使用相對於整個地方的位置。如果你這樣做，那麼你可能做錯了什麼。在這個解決方案中，我將兩個入口區域向左移動。您可以調整stylized1的上邊距以定位它。我也清理了很多你的html結構。

我當時認爲你是用-1600px編輯元素的頂部邊距，但如果我錯了，請讓我知道你正在編輯頁邊上的哪一個。

http://jsfiddle.net/fVh23/

<div id="container"> 
    <div id="header"></div> <!-- end header --> 

    <div id="main"> 
     <form id="form" name="form"> 
      <div id="stylized"> 

       <label>Name 
       <span class="small">of company, business, etc...</span></label> 
       <input type="text" name="name" id="name"/> 

       <label>Status Message 
       <span class="small">Max 40 Characters</span></label> 
       <input type="text" name="statusmessage" id="statusmessage"> 

       <label>URL to Menu</label> 
       <input type="text" name="url" id="url"/> 

      </div> <!-- end stylized --> 

      <div id="stylized1"> 

       <label>Street Address</label> 
       <input type="text" name="stretaddress" id="streetaddress"/> 

       <label>City</label> 
       <input type="text" name="city" id="city"/> 

       <label>State</label> 
       <input type="text" name="state" id="state"/> 

       <label>ZIP</label> 
       <input type="text" name="zip" id="zip"/> 

      </div><!-- end stylized1 --> 
      <br style="clear: both;" /> 
      <button type="submit">Submit</button> 
      <div class="spacer"> 

     </form><!-- end form1--> 
    </div><!-- end main --> 
</div><!-- end container -->