2

在 HTML 的同一行上使用基于从右到左的单选按钮时，我注意到了一个问题。如我所料，单选“按钮”与相关文本不一致；第 1 组的收音机在第 4 组的标签旁边，但其他按钮似乎按我的预期排列。这发生在多个浏览器上。

这是预期的行为吗？一个从右到左的语言人会理解这一点吗？

你可以在这里玩代码：http: //jsfiddle.net/6U9fw/

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />
4

2 回答 2

3

我不相信您的代码正常运行rtl。

看看这个 jsfiddle。我&rlm;在每个input标签及其相关文本之间添加。这是此错误的解决方法，结果产生了我认为是预期的输出。

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />&rlm;
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />&rlm;
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />&rlm;
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />&rlm;
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />
于 2013-03-05T17:58:16.483 回答
2

它的行为不正确，因为您的 div 是 rtl，但您的标签是英文的，这是一种 ltr 语言。在诸如希伯来语之类的 RTL 语言中使用标签也可以自然地解决问题，并且在 RTL div 中，您可能无论如何都需要 RTL 语言中的标签。

这是一个例子：

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1">קבוצה א</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2">קבוצה ב</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3">קבוצה ג</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4">קבוצה ד</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />

如果你需要一个带有非 RTL 标签的 RTL div，你也可以使用双向隔离：

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group1</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group2</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group3</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />

注意样式规范。

这个解决方案比添加 ‏ 更优雅，但不幸的是它在 Microsoft Internet Explorer 中不起作用。

于 2013-03-06T18:21:55.810 回答