css - 如何强制我的标签向左对齐？

Question

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

<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 之类的所有方法，但无论我做什么，它都会坚持到中心。

Answer 1

您需要清除标题上的 float - 不确定为什么要 float 它。也不要使用表格进行布局 - 它会否定 Bootstrap 的使用并且在语义上不正确

<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>