无法让输入字段保留在联系表单的 div 中

Question

我真的卡在了一些应该很简单的事情上。我在 Google 上搜索了修复程序，但找不到任何修复程序。大多数人都说要添加 {box-sizing: border-box;}，但我已经添加了。

HTML代码：

<div class="row">
  <form  method="post" action="#" class="contact-form clearfix">
    <div class="row">
     <div class="col span-1-of-2">                     
      <input type="text" name="name" id="name" placeholder="Name" required>
     </div>
     <div class="col span-1-of-2">
      <input type="email" name="email" id="email" placeholder="Email" required>
     </div>
    </div>
                          
    <div class="row">
      <textarea name="message" id="message" rows="4" placeholder="Message"></textarea>
    </div>
                          
    <div class="row">
       <input type="submit" name="submit" id="submit" value="SEND MESSAGE">
    </div>                  
  </form>
</div>

CSS代码：

/* THE STANDARD STUFF */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    background-color: #fff;
    color: #777;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix{zoom:1;}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row{
    width: 1170px;
    margin: 0 auto;
}


/* FROM GRID.CSS */

.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.span-1-of-2 {
    width: 49.2%;
}

/* THE CONTACT STYLE */

.contact-form{
    width: 80%;
    margin: 0 auto;
}

input[type=text], input[type=email], textarea{
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea{    
    height: 100px;
}

.contact-form #submit{
    border: 0;
    margin-top: 20px;
}

*:focus{
    outline: none;
}

表单如下所示：http://codepen.io/anon/pen/apVzyg

如您所见，字段被推到右侧，而不是停留在行和联系表单的容器内，后者设置为 80%。对于我的一生，我无法弄清楚为什么会这样。也许错误就在我面前，但我现在已经有了狭隘的视野。

我根据老师的风格和例子做了这个，你可以在这里查看：http://codepen.io/anon/pen/VPrYqm

这和我的有点相似，只是我不使用标签，而是使用 col 1-of-2。

grid.css 文件是从 responsivegridsystem(dot)com 下载的。

Answer 1

出现此问题是因为您明确设置了行宽。

width: 1170px;

删除此行，您将获得所需的 HTML 渲染效果。

看到这支笔：http://codepen.io/vici0us/pen/mRqJXK?editors=1100

Answer 2

contact-form 父容器属于 class .row，并将获得 1170px 的固定宽度。然后 contact-form 被定义为该大小和边距 auto 的 80%。所以边距将是 1170px 的 20%，每边 10%。您可以通过删除 1170px 限制来修复它。您可以查看 min-width 和 max-width 属性以获得更具适应性的布局。

无法让输入字段保留在联系表单的 div 中

Can't get input fields to stay inside the contact form's div

html

css

input

containers

contact-form