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>元素通常不包围整个输入元素。使用＆＃34; for＆＃34;属性以匹配您输入的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和容器元素可能需要更新。

修改 Here is an old Site Point Article有助于获得您正在寻找的布局。

对齐我创建一个帐户表单

2 个答案: