Question

您好我尝试将所有输入对齐以获得正常形式！我无法让它融合在一起!! GRR感谢你的帮助...这是2小时我在这个简单的事情上迷失了我的时间......

         <form name="input" action="html_form_action.asp" method="get">

                <div id="one">
                <p><label>Prénom</label> <input type="text" id="Prénom"/></p>
                <p><label>Nom</label> <input type="text" id="Nom" /></p>
                <p><label>Mot de passe</label> <input type="text" id="Pass" /></p>
                <p><label>E-mail</label> <input type="text" id="Mail" /></p>
                </div>

               <input type="submit" value="Submit" />
         </form>

Answer 1

您可以为标签指定宽度，并将它们文本对齐到右侧。要做到这一点，你必须使它们成为内联块元素。

请参阅this fiddle

我猜你没有将它们对齐。当人们使用桌子来做这件事时，这只是我看到的一种风格。

Answer 2

如果你只是想让它排队而不使用表，你可以使用一些简单的CSS：

label {
    width: 120px; //however wide your longest label is
    float: left;
}

然后只需取出p标签并在每次输入后放置换行符。

Answer 3

我想你的意思是表格的表格外观，分为两列，一列用于标签，另一列用于输入字段，第二列对齐左边，第一列左边或（更可读）或者右边。最明显和最强大的方法是使它成为一个表：

<table id="one">
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/>
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" />
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" />
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" />
</table>

然后在CSS中根据需要设置样式，例如使用td：first-child：text-align：right。

这会导致第一列与最长标签所需的一样宽。其他方法需要猜测宽度，这不是很健壮，因为所需的宽度将取决于字体。

对于那些指责你“使用表格进行布局”的人，你可以回答这是一种实际有效的方法，并且没有理由认为这样的表格不能被视为表格数据。

Answer 4

不确定你想要达到什么目的。

但是如果你想将输入的值对齐到文本框中。在输入标记中，添加：

style="text-align: right"

如果您想将所有文本框对齐，我建议您可以在表格中重新格式化表单。

HTML表单右对齐

4 个答案: