为什么我不能为我的表单添加边距？

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 -->