我的表單右側的保證金奇蹟般變化？

Question

我試圖以我的表格爲中心，但它的右邊有一個魔術邊距。我試圖讓我的表單響應，但是當我調整窗口大小時，我的提交按鈕只是不想居中，任何提示？ http://jsfiddle.net/z85687ne/1/ - 在語言

a 

Answer 1

你通常缺乏box-sizing屬性被設置爲border-box使用SCSS，讓您的內容可以包括：margins和paddings到它們的大小的整體計算。
然後你就可以將其設置爲width:100%像這樣：

CSS：

@import "elements.less"; 
@import "normalize.less"; 
@import "var.less"; 

#main { 
    p { 
     a { 

     } 
    } 
} 

body { 
.font(); 
} 
header img { 
    margin: 0 auto; 
    display: block; 
    margin-top: 3%; 
    border: 4px @blue solid; 
} 
section p { 
    .font(20px); 
    text-align: center; 
} 
section > p { 
    margin-bottom: 5px; 
} 
.contact-info { 
    border: 2px black solid; 
    margin: 20px auto 20px auto; 
    width: 80%; 
} 
#contact-area { 
    width: 600px; 
    margin-top: 25px; 
    margin: 0 auto; 
    border: 2px black solid; 
    padding: 15px; 
     input, textarea { 
      padding: 5px; 
      width: 471px; 
      font-family: Helvetica, sans-serif; 
      font-size: 1.4em; 
      margin: 0px 0px 10px 0px; 
      border: 2px solid #ccc; 
      } 
     textarea { 
      height: 200px; 
     } 
     textarea:focus, input:focus { 
      border: 2px solid #900; 
     } 
     input.submit-button { 
      width: 100px; 
      float: right; 
      background-color: #0066FF; 
      text-transform: uppercase; 
     } 
} 


label { 
    float: left; 
    text-align: left; 
    margin-right: 15px; 
    width: 100px; 
    padding-top: 5px; 
    font-size: 1.4em; 
} 


#main { 
p { 

} 
} 

.post-it{ 
    margin-top: 50px; 
} 

.note { 
    color: #333; 
    position: relative; 
    width: 300px; 
    margin: 0 auto; 
    padding: 20px; 
    font-family: Satisfy; 
    font-size: 30px; 
    box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3); 
    background: #eae672; 
} 
ul.share-buttons{ 
    list-style: none; 
    padding: 0; 
    text-align: center; 
} 

ul.share-buttons li{ 
    display: inline; 
} 

p { 
    color: black; 
    .tr(all 0.3s linear); 
    &.class1 { 

    } 
    &:hover { 
     color: lime; 
     .tr(all 0.3s linear); 
    } 
} 

@media screen and (max-width: 1000px) { 
    html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 
    #contact-area { 
     width: 100%; 
       input, textarea { 
        width: 100%; 
       } 
     input.submit-button { 
      width: 100%; 
      margin: 0 auto; 
      float: left; 
      background-color: #0066FF; 
      text-transform: uppercase; 
     } 
    } 
} 

JSFiddle爲

Answer 2

在我看來，你需要控制在你的元素一些額外的水平。它可以在你的表單中使用div來完成。

<form> 
    <div class="form-element"> 
    <label for="Name">Name:</label> 
    <input type="text" name="Name" id="Name" /> 
    </div> 
</form> 

然後你就可以控制與

#contact-area { 
    width: 100%; 
    max-width: 600px; 

    .form-element { 
    width: 470px; 
    margin: 0 auto; 

    > label { 
     width: 125px; 
     display: inline-block; 
    } 

    > input, 
    > textarea { 
     display: inline-block; 
    } 
    } 
} 

的形式，並且不浮動你的提交按鈕的權利，如果你希望它爲中心。