使 div 响应并在其中包含内容答案

【问题标题】：make a div responsive and content inside it使 div 响应并在其中包含内容
【发布时间】：2015-07-20 22:31:43
【问题描述】：

我正在尝试使我的注册表单具有响应性，我已尝试添加

在外部 div 中

width:100%;

在内部 div 中

margin-left:auto;
margin-right:auto;

但我认为它不起作用。更新我在 wordpress 上，这是我的网站link，这是问题区域的屏幕截图。 link

【问题讨论】：

您能否将有关您的注册表单的整个 HTML 和 CSS 代码添加到您的问题中或制作一个 jsfiddle？
请使用您当前的 css 和 html 代码创建一个代码 sn-p。
我在 wordpress 上，这是我的网站link，这里是问题区域的截图。 link
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签： css responsive-design

【解决方案1】：

这里有一些东西要修复：

.sign_up_center {
    width: 100%; // responsive, for smaller screen
}
#field_2_1 {
    // force height, if not, your button goes on your field
    width: 100%;
    height: 50px;
}
#input_2_1{
    // full size mail field
    display: block;
    width: 100%;
}
#gform_submit_button_2{
    // full size submit button
    width: 100%;
}

【讨论】：

【解决方案2】：

使用margin: 0 auto;

body {
  width:100%; 
  height:100%; 
  
  background:grey;
}
form {
  width: 50%; 
  min-height: 1000px;
  margin: 0 auto; 
  background: lightgrey;
  text-align:center;
}
input {
  display: block;
  margin: 0 auto;
}

<form>
    sign in
    <input type="text"/>
    <input type="password"/>
</form>

【讨论】：

您应该尝试隔离您的代码，将其发布在您的问题中，以便我们更好地帮助您，这不是我们为您工作的地方。见@Paulie_D