Флажок расположен сверху надписи, а не слева от надписи - PullRequest
Новая
       37

Флажок расположен сверху надписи, а не слева от надписи

0 голосов
/ 07 июня 2018

Я использую загрузочный плагин с множественным выбором в моем проекте, но по какой-то причине флажки и метки не встроены.см. рис. ниже. enter image description here

Это то, чего я пытаюсь достичь.enter image description here

Вот мой 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
    });

Я также включил эту картинку ниже, если это поможет.enter image description here

Есть ли более простое решение для решения этой проблемы?

Заранее благодарим.

1 Ответ

0 голосов
/ 07 июня 2018

На вашем скриншоте видно, что ваши входные данные берут display: block; из вашего reg_form.css файла.Таким образом, они действуют как блочные элементы (то есть они занимают всю ширину линии и не позволяют другим элементам сидеть рядом с ними). ​​

enter image description here

Я быутверждают, что вы никогда не должны стилизовать элемент input напрямую.Не могу вспомнить случай, когда флажок и текстовый ввод будут использовать все стили.

Так что вы должны изменить свои стили на что-то вроде этого: 

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

Если у вас есть другие типы ввода(например, электронная почта или пароль), добавьте их отдельно, как и ввод текста (например: input[type="email"])

...