html - 图例表单中的水平表单

Question

如何将水平表单添加到图例表单？当我尝试这样做时，水平形式看起来不应该：http: //i.imgur.com/tJAT5k4.png

这是我的代码：

<form>
 <fieldset>
 <legend>Legend Text</legend>
 <form class="form-horizontal">
   <div class="control-group">
   <label class="control-label" for="inputEmail">Email</label>
   <div class="controls">
   <input type="text" id="inputEmail" placeholder="Email">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="inputPassword">Password</label>
   <div class="controls">
   <input type="password" id="inputPassword" placeholder="Password">
   </div>
   </div>
   <div class="control-group">
   <div class="controls">
   <label class="checkbox">
   <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
   </div>
   </div>
 </form>
 </fieldset>
</form>

所有的 CSS 都是 bootstrap 默认的 CSS。

Answer 1

移除外部<form>标签。

<fieldset>
 <legend>Legend Text</legend>
 <form class="form-horizontal">
   <div class="control-group">
   <label class="control-label" for="inputEmail">Email</label>
   <div class="controls">
   <input type="text" id="inputEmail" placeholder="Email">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="inputPassword">Password</label>
   <div class="controls">
   <input type="password" id="inputPassword" placeholder="Password">
   </div>
   </div>
   <div class="control-group">
   <div class="controls">
   <label class="checkbox">
   <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
   </div>
   </div>
 </form>
</fieldset>