css - 在与复选框标签相同的行中输入复选框

Question

我正在使用一个非常复杂的 wordpress 并尝试自定义一个不合作的区域。在 380 像素宽的侧边栏中，有一个搜索小部件的复选框选择器，可根据提供的特定便利设施搜索位置。其中一些复选框的标签长于侧边栏的宽度，当发生这种情况时，文本从复选框本身的下一行开始，我们希望它保持在同一行并从末尾换行。

这是当前问题的图片:

<span class="goption">
<label class="options">
<input type="checkbox" name="field1231091388[]" value="value">
<span class="checkbox">
</span>
</label>
<label for="field1231091388">
Circulation Path (A Continuous And Unobstructed Way Of Travel From Any Point In A Building Or Structure To A Public Way)
</label>
</span>

在不调整侧边栏大小的情况下，如何确保复选框保持在标签的右侧并在行尾而不是标签开头断开？像这样:

goal

Answer 1

尝试将标签和输入包装在一个 div 中，并将该 div 设置为显示为 flex。

<div style="display: flex;">
    <input type="checkbox"/>
    <label>Lorem lorem em lorem loremLorem lorem lorem Lorem lorem lorem</label>
</div>

如果这是你想要完成的