对齐我的帐户表格

Question

我从互联网上尝试了许多不同的方法，但到目前为止都没有奏效。 我想要的只是表单上的输入框要对齐，因为它们现在不在中心。 谢谢

<form style="text-align:center;">
    <p><label> First Name:
        <input name="fName" id="fName"type="text" required/>
    </label>*
    </p>

    <p><label> Last Name:
        <input name="lName"id="lName"type="text"/>
    </label> *
    </p>

    <p><label> Email:
        <input name="email"id="email"type="email"/>
    </label>*
    </p>


    <p><label> Username:
        <input name="username"id="username"type="text"/>
    </label>*
    </p>


    <p><label> Password:
        <input name="password1"id="password1"type="password"/>
    </label>*
    </p>


    <p><label> Re-enter Password:
        <input name="password2"id="password2"type="password"/>
    </label>*
    </p>
    </form>

Answer 1

只需将文本向右对齐，然后将表格向左浮动：

style="text-align:right;float:left"

演示：

 <form style="text-align:right;float:left"> <p><label> First Name: <input name="fName" id="fName"type="text" required/> </label> &nbsp;&nbsp; </p> <p><label> Last Name: <input name="lName"id="lName"type="text"/> </label> &nbsp;&nbsp; </p> <p><label> Email: <input name="email"id="email"type="email"/> </label>* </p> <p><label> Username: <input name="username"id="username"type="text"/> </label>* </p> <p><label> Password: <input name="password1"id="password1"type="password"/> </label>* </p> <p><label> Re-enter Password: <input name="password2"id="password2"type="password"/> </label>* </p> </form> 

（也可以在某些地方移除星标，用  代替以显示在不需要该字段的情况下该怎么做）

Answer 2

您正在将表格居中对齐，因此它的子元素将有些笨拙。 同样， <label>元素通常不会包围整个输入元素。 使用“ for”属性来匹配输入的ID。

您将需要使用一些CSS来稍微调整布局。 每个浏览器将处理略有不同的表单元素。

例如：

HTML

<form>
    <p>
        <label for="fName">First Name:</label>
        <input name="fName" id="fName" type="text" required/>
    </p>
    <p>
        <label for="lName">Last Name:</label>
        <input name="lName" id="lName" type="text" />
    </p>
</form>

CSS

form label {
    display: block;
}

的jsfiddle

根据您希望表单标签的外观（上方，内联等），您的CSS和容器元素可能需要更新。

编辑 这是一个旧的Site Point文章 ，它将帮助您获取所需的布局。