在与复选框标签相同的行中输入复选框答案

【问题标题】：Input checkboxes in same line as checkbox label在与复选框标签相同的行中输入复选框
【发布时间】：2019-03-09 00:37:16
【问题描述】：

我正在使用一个非常复杂的 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

【问题讨论】：

嗨，你也可以发布你的 CSS 吗？

标签： css checkbox layout alignment wordpress-theming

【解决方案1】：

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

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

如果这是你想要完成的事情

【讨论】：

【解决方案2】：

使用 bootstrap 轻松布局 :)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

【讨论】：

如果不是 wordpress 仪表板主题后端自动构建复选框代码（效果不佳）以及最终用户希望保持后端完整以方便使用，这将很好用为什么我们要坚持使用 CSS 来纠正问题。
对于这样一个简单的问题，加载整个库并不是一个好主意。