Выравнивание флажка рядом с текстом

Question

Я пытаюсь, чтобы мои флажки выравнивались и складывались, например, http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox.

страница, что я работаю на это http://juniorgoldreport.com/landing-page/

Я пытался использовать display: inline; и text-align: left;, а также float: left;. Я не уверен, как это исправить. Класс chk_bx существует только потому, что я старался изо всех сил попытаться настроить этот раздел формы.

Это мой HTML:

<form action="action_page.php"> 
    <fieldset> 
     <div id="form_jgrsh"> 
      First name:<br> 
      <input type="text" name="firstname" placeholder="Please enter first name"> 
      <br> 
      Last name:<br> 
      <input type="text" name="lastname" placeholder="Please enter last name"> 
      <br> 
      Email:<br> 
      <input type="text" name="email" placeholder="Please enter email"> 
      <br><br> 
      <div class="chk_bx"> 
      <input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse 
      <br> 
      <input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report 
      </div> 
      <input type="submit" value="Submit"> 
     </div> 
    </fieldset> 
</form> 

CSS

#form_jgrsh { 
    width:300px; 
    margin:0 auto; 
    text-align:left; 
} 
#form_jgrsh .chk_bx{ 

} 
#form_jgrsh input, textarea { 
    width:100%; 
    border: 2px solid black; 
    line-height: 30px; 
} 
.exc-form { 
    text-align:center; 
} 

Answer 1

Проблема width:100%. дать width к checkbox

#form_jgrsh { 
 
width:300px; 
 
margin:0 auto; 
 
text-align:left; 
 
} 
 
#form_jgrsh .chk_bx{ 
 

 
} 
 
#form_jgrsh input, textarea { 
 
    width:100%; 
 
    border: 2px solid black; 
 
    line-height: 30px; 
 
} 
 
.exc-form { 
 
    text-align:center; 
 
} 
 

 
.chk_bx input { 
 
    width:20px !important; 
 
    }

<form action="action_page.php"> 
 
      <fieldset> 
 
      <div id="form_jgrsh"> 
 
      First name:<br> 
 
      <input type="text" name="firstname" placeholder="Please enter first name"> 
 
      <br> 
 
      Last name:<br> 
 
      <input type="text" name="lastname" placeholder="Please enter last name"> 
 
      <br> 
 
      Email:<br> 
 
      <input type="text" name="email" placeholder="Please enter email"> 
 
      <br><br> 
 
      <div class="chk_bx"> 
 
      <input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse 
 
      <br> 
 
      <input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report 
 
      </div> 
 
      <input type="submit" value="Submit"> 
 
      </div> 
 
      </fieldset> 
 
     </form>

Answer 2

Изменить эту строку здесь:

// First line 
#form_jgrsh input[type="text"], textarea { 
    width:100%; 
    border: 2px solid black; 
    line-height: 30px; 
} 

Вы настраивали все входы в width: 100%, который толкал текст ниже флажков. Только установите его на type="text" входов.

Fiddle: https://jsfiddle.net/xa5fv1p0/

Answer 3

Вашей проблема заключается в том, что у вас есть width:100% назначенного для всех полей ввода, которая вызывает флажки занять всю ширину.

Присвоить класс для флажков и перезаписать атрибут ширина примерно так:

#form_jgrsh .checkbox { 
    width: auto; 
} 

Fiddle: https://jsfiddle.net/yhc4rujh/