Question

我刚刚完成了很多关于HTML5和CSS3的课程，现在我已经开始练习了，但我真的陷入了应该很简单的事情。我在Google上搜索了一个修复程序，但找不到任何修复程序。大多数人都说要添加{box-sizing：border-box;}，但我已经有了。

HTML code：

<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

联系表单父容器属于.row类，其固定宽度为1170px。然后将contact-form定义为该大小的80％和margin auto。所以利润率将是1170px的20％，每边10％。您可以通过删除1170px限制来修复它。您可以查看最小宽度和最大宽度属性，以实现更具适应性的布局。

无法获取输入字段以保留在联系表单的div

2 个答案: