我很难将单选按钮转换为RTL格式。你能帮忙吗？
<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> فيلا
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
只需将标签容器写在输入容器之前，就像这样：
<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">فيلا</label>
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<span class="circle">
<span class="check"></span>
</span>
</div>,
在这种情况下，Html的布局更改将不再起作用。应该仅使用CSS样式进行修复。
因此，在转换html页面阿拉伯语版本时，请应用以下样式。
.form-check {
direction: rtl;
}
当<html>标记具有“ lang =“ ar”时，此样式也适用。
<html lang="ar">
<body>
<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> فيلا
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</body>
</html>
html[lang="ar"] .form-check {
direction: rtl;
}
此代码段显示了实时示例。
.form-check {
direction: rtl;
}<div class="form-check" style="width: 49%;text-align: right;position: inherit;display: inline-block;">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> فيلا
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>,
html[dir="rtl"] .form-check .form-check-label span{
left: unset;
right: -1px;
}
当标记具有`dir =“ rtl”时，此样式也适用。
EX：
<html dir="rtl" lang="ar">
...
</html>