如何将一个带有fieldset的表单置于div中？

Question

我正在尝试创建一个看起来像我所做的线框的表单

我现在在这里

我的代码如下

HTML

<div id="accountRequest">
  <form>
    <fieldset>
      <legend>Please sign up here </legend>
      <label>First Name</label>
      <input type="text" />
      <label>Last Name</label>
      <input type="text" />
      <label>Display Name</label>
      <input type="text" />
      <label>Password</label>
      <input type="text" />
      <label>Tell us about yourself (optional)</label>
      <textarea rows="3"></textarea>   
      <label>Email</label>
      <input type="text" />
      <div>
      <button class="btn btn-primary">Create Account</button>
    </div>
  </fieldset>
</form>

CSS

#accountRequest {
  background-color:#fff;
  border-radius:3px;
  width:330px;
  border: 1px #333 solid; 
}
#accountRequest form { 
  width:282px; 
}
#accountRequest fieldset { border-radius:3px;
  max-width: 300px;
}
#accountRequest form input, 
#accountRequest form textarea { 
  width: 300px; 
}

不是Center a form using css的副本，因为它解决了整个页面的中心问题。

也不是Center a div that contains a contact form的副本，因为该表单不包含字段集。而且这里的字段集似乎存在一些意想不到的问题。

Answer 1

看起来你的输入太宽了。尝试：

#accountRequest form input,
#accountRequest form textarea { 
   width: 100%; 
}

Answer 2

显然这种方式效果最好但仍然看起来很糟糕。

#accountRequest {
  background-color:#fff;
  border: 1px #333 solid; 
  border-radius:3px;
  height:540px;
  width:360px;
}
#accountRequest form { 
  margin: auto;
  position: relative;
  width: 96%;
}
#accountRequest fieldset { border-radius:3px; }
#accountRequest form label { margin:auto; width:100%; }
#accountRequest form input, 
#accountRequest form textarea { margin:auto; width: 96%; }

Answer 3

不确定您是否已将其整理出来，但我已将宽度更改为百分比。与固定像素相比，我认为这些会更好。我使用margin：0 auto来整个表单及其元素

#accountRequest {
  background-color:#fff;
  border-radius:3px;
  width:100%;
  border: 1px #333 solid; 
}
#accountRequest form { 
  width: 60%;
  margin: 0 auto;
}
#accountRequest fieldset { 
 border-radius:3px;
 width: 100%;
}
#accountRequest form input, 
#accountRequest form textarea { 
  width: 100%; 
}