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

【问题标题】：How can I keep checkboxes and text on the same line on mobile devices?如何在移动设备上将复选框和文本保持在同一行？
【发布时间】：2016-04-27 23:48:46
【问题描述】：

如何使复选框后的文本在 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

它只需要正确对齐...

我已尝试将文本缩小，但我只能做到这一点，直到文本无法阅读为止。

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

【问题讨论】：

请发布您的 HTML
寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
我们还需要查看换行的文本，@Steggie
问题解决了吗？我遇到了同样的问题。

标签： css responsive-design

【解决方案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;
    }
}

【讨论】：