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

Question

我在我的项目中使用了bootstrap multiselect插件，但由于某种原因，复选框和标签不是内联的。请参见下面的图片。

这就是我想要的。

以下是我的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

屏幕截图中显示您的输入从 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"]）