Textbox 文本字段右对齐标签位置的跨浏览器CSS

我的UI使用rightToLeft语言，所以我需要在右边有textfield的标签。我尝试使用div和float:right作为标签，div和float:left作为文本字段。但在我的表格中它仍然没有正确对齐

这是代码示例：

<s:form action="processRegister" cssClass="form">
    <div style="float:right;text-align:right">
        <s:text name="label12.msg"/>
    </div>
    <div style="float:left">
        <s:textfield name="username" cssClass="textfield" />
    </div>

    <div style="float:right;text-align:right">
        <s:text name="label13.msg"/>
    </div>
    <div style="float:left">
        <s:password id="password1" name="password" cssClass="textfield"/>
    </div>
</s:form>

---

当我使用table并试图将textfield放在一列上，将label放在另一列上时，它们并没有在一行上对齐。

它以什么方式没有正确对齐？能给我们看一些截图和编码的例子吗？ 你想检查你的magin和每个字段的填充是否正确对齐？ 首先将边距和填充设置为0

实际上，另一种方法是使用表，如果它适用于您的话。 在单个单元格中，只需确保填充/边距为0。 然后使用单元的对齐特性调整对齐问题。 据我所见，使用表格进行表单对齐绝对是跨浏览器的

这正是您想要的。关键在于清除浮点数，以便所有输入/标签行结束于各自的不同行上。如果可能的话，使用浮动来指定元素的宽度也是一个好主意。这将防止意外的浮动下降

另外，为了可用性，我添加了一个元素，这样屏幕阅读器就会知道你的标签适用于哪一个

HTML

---

你有截图吗？有几个可能的原因，谢谢，但当我使用table并尝试将textfield放在左栏，将其标签放在右栏时，textfield会得到一整行，并且不会在一行中与其标签对齐。我使用了简单的主题来解决这个问题，但它不允许验证工作，所以我不得不删除它。实际上，您的文本字段是一个文本框或文本区域，从您的代码来看，它似乎是一个文本框等价物。我不太明白你的textfield这个词有一整行，并且没有和它的标签对齐。也许你可以试试这个？控制单元格和表格的宽度。如果这仍然没有帮助，那么我很抱歉，无法帮助谢谢。我需要检查一下。但实际上问题是，我必须使用struts2的用户标签来获取用户的输入，它用2呈现一个，一个用于标签，另一个用于输入。我想我需要为该标记定义一个新模板。谢谢你的回复。你能为那些文本字段切换到简单的主题吗？这样就不会呈现tr和td标签。不幸的是，如果您必须继续使用表行/表单元格，那么在交换标签和输入字段的位置方面就没有什么可做的了。

<form>
    <div>
        <label for="username">Username</label>    
        <input type="text" id="username" name="username" size="20"/>
    </div>
    <div>
        <label for="password">Password</label>   
        <input type="password" id="password" name="password" size="20"/>
    </div>
</form>

div {
    clear: both;
    width: 300px;
}

div label {
    float: right;
    text-align: right;
}

div input {
    float: left;
}