Question

我正在使用mdl-checkbox和复选框右侧的文本。我想在RTL语言的情况下切换这两个组件的顺序（复选框左侧的文本），但我不能将文本移到左侧（它总是在右侧）。

我尝试了很多变体＆＃34; dir = rtl＆＃34;，方向：rtl，align等等。但是文字保留在右侧。我也试过使用一些CSS选项，但我仍然无法切换顺序。

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" />
    <span class="mdl-checkbox__label">My Text</span>
</label>

JSFIDDLE Example

如何在不影响页面其余部分的情况下轻松切换文本和复选框之间的顺序？

页面上的所有其他组件在RTL语言中表现良好。

谢谢！

Answer 1

请检查下面给出的链接。这些可能有助于您创建复选框。

Github Link：我没用过，但你可以检查一下。愿这个人也帮助你。

RTL CDN for MDL：我已使用此功能创建了代码段。

Check this one also

＆＃13;

#a {
  width: 90px;
}

＆＃13;

<link href="https://cdn.rtlcss.com/mdl/1.2.1/material.rtl.min.css" rel="stylesheet" />
<script src="https://cdn.rtlcss.com/mdl/1.2.1/material.min.js"></script>

<div id="a">
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>

＆＃13;

Answer 2

使用material.min.css与material.rtl.min.css进行diff后，我发现以下CSS解决了这个问题：

.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-right:24px}
.mdl-radio__outer-circle, .mdl-checkbox__box-outline{right:0;}
.mdl-radio__inner-circle {right:4px;}
.mdl-radio__ripple-container, .mdl-checkbox__ripple-container{right:-10px;}

JSFIDDLE Solution

谢谢大家的帮助！

对于RTL语言，mdl复选框应该在右侧

2 个答案: