如何在移动设备上将复选框和文本保留在同一行？

Question

如何在iPhone / iPad或任何其他移动设备上的复选框保持不变后制作文字？

按要求提供HTML

<input class="sf-input-checkbox" value="film-en-tv"
name="_sft_feesttype[]" id="sf-input-58f5ef0e0b857a1a5c8674157bbb464f"
type="checkbox">

当我在移动设备上查看我的网站时，复选框旁边的“幻灯片”复选框旁边的文字。

这样的事情：

X
  Text-checkbox

我想让它保持在电脑上的样子。像这样：

X Text-checkbox

另外我不介意它最终看起来像这样：

X Text-
  checkbox

只需要正确对齐......

我试图让文字更小，但我只能走得那么远，直到文字不可读。

这里有人知道一个好的解决方案吗？

Answer 1

请参阅答案以供参考：

css - How to make and appear on the same line on an HTML form? - Stack Overflow

我使用这种方法如下：

<div class="cbWithText">
    <div style=float: left">
       <imput type="checkbox">
    </div>
    <div style="float: left">
       <div>Text</div>
    </div>
</div>

.cbWithText {
    @media (min-width: 500px) {
        display: flex;
        flex-direction: row;
    }
}