Ссылка на флажок - показывать встроенный и оставленный плавающим не работает - PullRequest
Новая
       15

Ссылка на флажок - показывать встроенный и оставленный плавающим не работает

1 голос
/ 21 апреля 2019

Я подключаю форму регистрации Mailchimp к своему веб-сайту Wordpress https://thetekworks.com - однако флажок GDPR работает не так, как я ожидал ... после просмотра флажка должна появиться ссылка на мою политику конфиденциальности. но он появляется на новой строке.

Я пытался использовать теги float и display, чтобы исправить это, как я нашел в Интернете, но это тоже не сработало. 

<p>
<input type="email" name="EMAIL" placeholder="Email address*" required />
    <label>
      <input style="float:left; display:inline" name="AGREE_TO_TERMS" type="checkbox" value="1" required="">
      <a href="https://thetekworks.com/privacy-policy/" target="_blank">I have read and agree to your privacy policy</a>
</label>

Я ожидал, что он будет вести себя подобно https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 21 апреля 2019

Обновление

После просмотра вашего сайта попробуйте использовать следующее CSS: 

.mc4wp-form-basic label {
  display: flex;
  align-items: center;
}

После добавления я вижу следующий результат:

enter image description here

Я думаю, вам нужно организовать макет из родительского элемента (<p> в данном случае). Используя flexbox, мы можем сложить электронную почту input и label (s) и устранить необходимость в float. Я также включил в ваши термины ссылку на обычный текст, чтобы на label можно было кликать, а не просто на ссылку. Щелчок по тексту метки должен переключать состояние флажка, с которым он связан. 

p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

[type="email"] {
  margin-bottom: 1em;
}

label {
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
<p>
  <input type="email" name="EMAIL" placeholder="Email address*" required />
  <label>
      <input name="AGREE_TO_TERMS" type="checkbox" value="1" required="">
      I have read and agree to your<a href="https://thetekworks.com/privacy-policy/" target="_blank"> privacy policy</a>
  </label>
  <label>
      <input name="SOMETHING ELSE" type="checkbox" value="2" required="">
      Another checkbox label
  </label>  
</p>
...