复选框位于标签顶部而不是标签左侧答案

【问题标题】：Checkbox sits on top of the label instead of to the left of the label复选框位于标签顶部而不是标签左侧
【发布时间】：2018-06-07 23:11:31
【问题描述】：

我在我的项目中使用引导多选插件，但由于某种原因，复选框和标签不是内联的。请看下图。

这就是我想要实现的目标。

下面是我的 HTML。

<div class="hs_cats field hs-form-field">
                <select id="catSelect" multiple="multiple">
                    {% for category in categories %}
                        <option value="{{ category.catDescription }}">{{ category.catDescription }}</option>
                    {% endfor %}
                </select>
            </div>

JQuery 代码如下。

$('#catSelect').multiselect({
        buttonWidth: '100%',
        includeSelectAllOption: true,
        maxHeight: 300
    });

如果有帮助，我还在下面添加了这张图片。

有没有更简单的解决方案来解决这个问题？

提前谢谢你。

【问题讨论】：

sahre 代码，你可能遗漏了一些东西，类等
是的，分享一些代码！！
每当您想在 StackOverflow 上提问时，请参阅这篇文章。 How do I ask a good question?
显示你已经完成的代码

标签： jquery html css bootstrap-multiselect

【解决方案1】：

在您的屏幕截图中可以看到，您的输入来自 reg_form.css 文件中的 display: block;。所以它们的行为就像块元素（意味着它们占据了行的整个宽度并防止其他元素坐在它们旁边）。

我认为你永远不应该直接设置input 元素的样式。想不到复选框和文本输入会共享所有样式的情况。

所以你应该把你的样式改成这样：

.steps input[type="text"], .steps textarea {
  outline: none;
  display: block;
  /* and whatever styles follow in your file */
}

如果您有其他输入类型（如电子邮件或密码），请单独添加，就像文本输入一样（例如：input[type="email"]）

【讨论】：