Этикетка на флажке не выстраивается в линию - CSS

Question

Я пытался улучшить свои макеты форм.

По каким-либо причинам ярлыки на моем флажке не будут располагаться друг на друге на каждом флажке.

Я стараюсь изо всех сил, чтобы каждая метка флажок сидеть на ней отметку с помощью кодов ФФ:

<div class="form-input-group"> 
    <i class="fa fa-book"></i> 
    <div class="checkbox-style"> 
     <input type="checkbox" value=""> Math &nbsp; 
     <input type="checkbox" value=""> Science &nbsp; 
     <input type="checkbox" value=""> English &nbsp; 
    </div> 
</div> 

Любая идея, что пошло не так, и как я могу решить эту проблему?

Вы можете проверить фактический сайт здесь: http://americanbitcoinacademy.com/test/student-registration.html с помощью инструментов инспектора Chrome.

Answer 1

Update это CSS, это будет устранить проблему, style.css , line number 1163

.sign-up .signup-form .form-input-group input[type="checkbox"] { 
    height: 27px; 
    margin-top: 0; 
    position: relative; 
    top: 8px; 
    width: 20px; 
} 

Answer 2

В styles.css на как 1166 (для .sign-up .signup-form .form-input-group input[type="checkbox"]), изменить margin-top:15px; к margin:0;

Тогда в style.css на как 1168 , для .checkbox-style add display: flex; align-items: center; height: 100%;

Answer 3

Существует множество способов получить то, что вы хотите. Мой подход состоял бы в том, чтобы использовать дополнение к родительскому элементу вместо поля для дочерних элементов.

В строке 1163, удалить margin-top и добавить vertical-align и margin:

.sign-up .signup-form .form-input-group input[type="checkbox"] { 
    width: 20px; 
    height: 27px; 
    vertical-align: middle; 
    margin: 0; 
} 

затем на линии 1170 надстройкой прокладки заменить запас верхом правило:

.checkbox-style { 
    font-size: 15px; 
    margin-left: 70px; 
    padding-top: 15px; 
} 

Эти изменения получают вам: