试图左对齐标签

Question

我有以下html，我的目标是对齐文本框的标签，使它们与文本框的左边缘对齐。现在它们由于最外层div上的css而居中对齐。另外，我不想失去最外层div的中心对齐。

我尝试为每个text-align:left设置labels，但它什么也没做。

此问题的演示位于以下网址：Demo

问题：我需要使用什么css来对齐标签？

<div style="margin: 0 auto; text-align: center; margin-top: 20px; width: 800px;">
  <div>
    <fieldset>
      <label for="txtName">Full Name</label><br>
      <input id="txtName" type="text" style="width:80%" /><br>
      <label for="txtCity">City</label><br>
      <input id="txtCity" type="text" style="width:80%" /><br>
    </fieldset>
  </div>
</div>

Answer 1

您需要使用：

1. display: block代表label，因为它是内联元素。
2. 您尚未正确关闭<div>。
3. 删除<br>并以此方式更新：

请参阅更新的代码段正常工作：

＆＃13;
＆＃13;
label {
  text-align: left;
  display: block;
  text-indent: 10%;
}
＆＃13;
<div style="margin: 0 auto; text-align: center; margin-top: 20px; width: 800px;">
  <div>
    <fieldset>
      <label for="txtName">Full Name</label>
      <input id="txtName" type="text" style="width:80%" /><br>
      <label for="txtCity">City</label>
      <input id="txtCity" type="text" style="width:80%" /><br>
    </fieldset>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

预览