复选框链接 - 显示内联和向左浮动不起作用

Question

我正在将 Mailchimp 注册表单连接到我的 Wordpress 网站 https://thetekworks.com - 但是 GDPR 复选框未按我预期的那样运行...查看了指向我的隐私政策的链接应该出现在我的复选框之后，但它出现了在新线上。

我已经尝试使用浮动和显示标签来纠正这个问题，正如我在网上找到的那样，但这也没有奏效。

<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

任何帮助将不胜感激。

Answer 1

更新

直接查看您的网站后，尝试使用以下CSS：

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

添加后，我看到以下结果：

---

我认为您需要从父元素（在本例中为<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>