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

在HTML的同一行中使用从右到左的单选按钮时，我注意到了一个问题。单选“按钮”没有像我预期的那样与相关文本对齐；第一组的收音机在第四组的标签旁边，但其他按钮似乎像我所期望的那样排列整齐。这在多个浏览器上发生

这是预期的行为吗？一个从右到左的语言使用者能理解这一点吗

您可以在此处使用代码：

第一组
第2组
第3组
第4组

我不相信您的代码在正常的

rtl

中运行正常

退房。我添加了

&rlm输入
标记及其关联文本之间的code>。这是一个解决方案，结果产生了我认为是预期的输出

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


&rlm；
第一组
&rlm；
第2组
&rlm；
第3组
&rlm；
第4组
它的行为不正确，因为您的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，还可以使用bidi隔离：

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


第一组
第2组
第3组
第4组

请注意样式规范

此解决方案比添加&rlm；，更优雅；，但不幸的是，它在微软的Internet Explorer中无法工作

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