如何强制我的标签向左对齐?
How can I force my label to align to the left?
我想给我的文本字段添加一个标签,标签应左对齐:
<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
之类的所有方法,但无论我做什么,它都坚持在中心。
您需要清除标题上的浮动 - 不确定为什么要浮动它。也不要使用表格进行布局 - 它会否定 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>