Question

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

这是代码示例：

<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放在一列上并在另一列上标记时，它们没有在一行上对齐。

Answer 1

它以什么方式不正确对齐？可以向我们展示一些截图和编码的例子吗？你想检查你的magin和每个没有正确对齐的字段的填充吗？首先将边距和填充设为0。

实际上另一种方法是使用表格，如果它适用于你。在单个单元格内部，只需确保填充/边距为0。然后使用单元格的alignment属性来调整对齐问题。从我看到，使用表格进行对齐绝对是跨浏览器

Answer 2

此jsfiddle可以满足您的需求。关键是清除浮动，以便所有输入/标签行最终都在它们自己的不同行上。使用浮点数尽可能指定元素的宽度也是一个好主意。这样可以防止意外漂浮下降。

另外，为了实用性，我添加了<label>元素，以便屏幕阅读器知道您的标签适用于哪个<input>。

<强> HTML

<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>

<强> CSS

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

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

div input {
    float: left;
}

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

2 个答案: