html - 单选按钮和文本在从右到左 (rtl) HTML 区域内的顺序是否正确？

Question

我注意到在 HTML 的同一行上使用从右到左的单选按钮时出现问题。单选“按钮”没有像我期望的那样与关联的文本对齐；第 1 组的 radio 位于第 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" />

Answer 1

我认为您的代码没有按预期正常运行以实现正确的 rtl。

查看 this jsfiddle .我在每个 input 标签及其相关文本之间添加了 ‏。这是 this bug 的解决方法，结果产生了我认为是预期的输出。

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