Html 引导卡作为显示数据的按钮

我有一个自定义复选框，我添加了一个文本，我希望文本对齐复选框的右侧

下面是一个例子：

这里是HTML

<div class="squaredThree">
  <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
  <label for="checkOther">Testing Check-Box</label>
</div>

---

我的代码中缺少了什么？任何建议都会很有帮助，谢谢您限制了

的宽度。请删除
宽度：20px
或增加它。还向其添加
左填充
：


/*.squaredThree*/
.平方三{
位置：相对位置；
浮动：左；
利润率：10px
}
.三方标签{
宽度：130px；
高度：20px；
光标：指针；
位置：绝对位置；
排名：0；
左：0；
背景：#D7B1D7；
边界半径：4px；
左侧填充：20px；
}
.平方三个标签：后{
内容：''；
宽度：9px；
高度：5px；
位置：绝对位置；
顶部：4px；
左：4px；
边框：3px实心#fcfff4；
边界顶部：无；
边界权：无；
背景：透明；
不透明度：0；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
.squaredThree标签：悬停：：后{
不透明度：0.3；
}
.squaredThree输入[类型=复选框]{
可见性：隐藏；
}
.squaredThree输入[类型=复选框]：选中+标签：之后{
不透明度：1；
}
/*结束，三方*/
.标签文本{
位置：相对位置；
左：10px；
}

测试复选框
将文本移到标签字段外，如下所示

<label for="checkOther"></label>Testing check-box


测试复选框

<label for="checkOther"></label>Testing check-box