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

Question

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

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

下面是我的 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
    });

如果有帮助的话，我还在下面放了这张照片。

是否有更简单的解决方案来解决此问题？

提前致谢。

Answer 1

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

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

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

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

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

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

Checkbox sits on top of the label instead of to the left of the label

jquery

html

css

bootstrap-multiselect