复选框链接 - 显示内联和浮动左边不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复选框链接 - 显示内联和浮动左边不起作用相关的知识，希望对你有一定的参考价值。
我正在将一个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相似
任何帮助将不胜感激。
答案
更新
在直接查看您的网站后，请尝试使用以下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>以上是关于复选框链接 - 显示内联和浮动左边不起作用的主要内容，如果未能解决你的问题，请参考以下文章