如何将标签与表单对齐在同一行？答案

【问题标题】：How to align label on same line as form?如何将标签与表单对齐在同一行？
【发布时间】：2014-03-07 01:46:46
【问题描述】：

我有以下使用引导程序登录屏幕的代码。请帮助将标签与表单输入字段对齐在同一行。

<div class="container">  
<div class="row">
    <div class="col-md-6">
      <div>
        <form class="form-horizontal">
        <fieldset>
        <legend>Existing Customer</legend>
        <div class="control-group">
        <label class="control-label" for="user">User Name:</label>
        <div class="control-group">
        <input type="text" class="textbox" id="user">
        </div>
        <label class="control-label" for="pwd">Password:</label>
        <div class="controls">
        <input type="text" class="textbox" id="pwd">
        </div>
        <div class="controls">
        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
        </div>
        </div>
        </fieldset>
        </form>
      </div>      
    </div>

  <div class="col-md-6">
        <legend>New Customer</legend>    
  </div>

【问题讨论】：

标签： forms label twitter-bootstrap-3

【解决方案1】：

Hi use table which solves your alignment issues.
-------------------------------------------------------------
 <html>
 <head>
 </head>
 <body>
 <div class="container">  
 <div class="row">
<div class="col-md-6">
  <div>
    <form class="form-horizontal">
    <fieldset>
    <legend>Existing Customer</legend>
    <table>
    <tr>
    <td>
    <div class="control-group">
    <label class="control-label" for="user">User Name:</label>
    </td>
    <td>
    <div class="control-group">
    <input type="text" class="textbox" id="user">
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <label class="control-label" for="pwd">Password:</label>
    </td>
    <td>
    <div class="controls">
    <input type="text" class="textbox" id="pwd">
    </div>
    </td>
    </tr>

    <div class="controls">
    <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
    </div>
    </div>
    </table>
    </fieldset>
    </form>
  </div>      
</div>

  <div class="col-md-6">
    <legend>New Customer</legend>    
 </div>
 </body>

我认为你应该从 ui 专家那里学习 css 并在你的项目中继续前进。这页纸布局应设计为仅开发人员应该能够使用（应用）css 界面层

【讨论】：

这有助于我在表 & 上添加登录按钮。但是，按钮是左对齐的。如何将其置于中心位置？

【解决方案2】：

这是使用 Bootstrap 3 的代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-horizontal" role="form">
                <fieldset>
                    <legend>Existing Customer</legend>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="user">User Name:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="user">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="pwd">Password:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="pwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="col-md-6">
            <legend>New Customer</legend>
        </div>
    </div>

以及相应的小提琴：http://jsfiddle.net/G2cgf/

【讨论】：

【解决方案3】：

向按钮提交margin-left，如下所示：

<input class="btn btn-primary" name="commit" type="submit" value="Log In" style="margin-left: 15px;"/>

【讨论】：