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

Question

我正在将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

任何帮助将不胜感激。

Answer 1

更新

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

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

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

---

我认为您需要根据父元素（在这种情况下为<p>）来组织布​​局。使用flexbox，我们可以堆叠电子邮件input和label，并消除对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>