如何强制我的标签向左对齐？答案

【问题标题】：How can I force my label to align to the left?如何强制我的标签向左对齐？
【发布时间】：2018-08-06 22:04:33
【问题描述】：

我想给我的文本字段一个标签，它应该左对齐：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

  <table style="width:100%; height:100%">
    <tbody>
      <tr>
        <td style="padding:15px" valign="top">
          <div class="tab-content product_single">
            <section class="content-header" style="margin-bottom:20px">
              <h1 style="float:left;margin-bottom:30px">New Entry</h1>
            </section>
            <section class="content">
              <div class="form-group">
                <form name="form" method="post">
                <div id="form"><div><label for="form_username" class="required">Username</label><input id="form_username" name="form[username]" required="required" class="form-control" type="text"></div><div><label for="form_email" class="required">Email</label><input id="form_email" name="form[email]" required="required" class="form-control" type="text"></div><div><button type="button" id="form_cancel" name="form[cancel]" class="form-btn btn btn-default pull-right close_sidebar close_h">Cancel</button></div><div><button type="submit" id="form_save" name="form[save]" class="form-btn btn btn-info pull-right" style="margin-right:5px">Save</button></div><input id="form__token" name="form[_token]" value="" type="hidden"></div>
                </form>
              </div>
            </section>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

由于我的应用程序中的某些样式，不知何故我的第一个标签总是粘在中间，我无法弄清楚任何样式，这是什么原因。所以我尝试了text-align:left 或text-align:left!important 之类的所有方法，但无论我做什么，它都只停留在中心。

【问题讨论】：

在sn-p中就可以了
然后创建一个 sn-p 演示问题...检查元素并检查您的哪种样式导致问题。
@Jarla 但是，如果演示没有重现问题，那还有什么意义呢？
您应该使用开发者工具（在大多数浏览器上按 F12）来获取应用于元素的样式。尝试了解电子邮件标签没有发生这种情况的原因（存在差异）。
是您在 h1 标签上的float:left; 导致您的“复制”样本出现此问题。

标签： css text-align

【解决方案1】：

您需要清除标题上的浮动 - 不知道您为什么浮动它。也不要使用表格进行布局 - 它会否定引导程序的使用并且在语义上是不正确的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

<div class="tab-content product_single">
  <section class="content-header" style="margin-bottom:20px">
    <h1 style="float:left;margin-bottom:30px">New Entry</h1>
  </section>
  

  <section class="content" style="clear:left">  <!-- I have added this style attribute or you could just remove the float from the heading -->
  
  
    <div class="form-group">
      <form name="form" method="post">
        <div id="form">
          <div><label for="form_username" class="required">Username</label><input id="form_username" name="form[username]" required="required" class="form-control" type="text"></div>
          <div><label for="form_email" class="required">Email</label><input id="form_email" name="form[email]" required="required" class="form-control" type="text"></div>
          <div><button type="button" id="form_cancel" name="form[cancel]" class="form-btn btn btn-default pull-right close_sidebar close_h">Cancel</button></div>
          <div><button type="submit" id="form_save" name="form[save]" class="form-btn btn btn-info pull-right" style="margin-right:5px">Save</button></div><input id="form__token" name="form[_token]" value="" type="hidden"></div>
      </form>
    </div>
  </section>
</div>

【讨论】：