复选框顶部和底部不需要 space

Question

我正在尝试删除复选框上方和下方不需要的 space。我在 WordPress 网站上使用 Contact Form 7，在模板的自定义 CSS 字段中写入。我已经尝试修改复选框和跨度 class 的显示、行高、边距、填充和垂直对齐属性。这是目前的情况：

显然我希望文本和复选框对齐。你能帮帮我吗？

页面是here

这是代码：

<p>
  <span class="wpcf7-form-control-wrap acceptance-845">
    <span class="wpcf7-form-control wpcf7-acceptance">
      <span class="wpcf7-list-item">
        <label>
          <input type="checkbox" name="acceptance-845" value="1" aria-invalid="false">
          <span class="wpcf7-list-item-label">I agree to the processing of my personal data (GDPR/ Privacy Reg. 2018 EU 2016/79)</span>
        </label>
      </span>
    </span>
  </span>
</p>

谢谢

Answer 1

您的 wp 主题很奇怪，而且可能非常糟糕。作为推荐，我不会使用它。

此 css 属性在您的示例中：

input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select {
    height: 50px; 
}

这意味着所有不同类型的 html input 都有一个设定高度...包括复选框。

要解决您的问题，请添加：

.wpcf7-list-item input {height:auto;}

（如果不起作用，您可能需要在规则中添加 !important）

复选框顶部和底部不需要 space

Unwanted space on top and bottom of checkbox

html

css

wordpress

checkbox

contact-form-7