CSS 联系表格 7 间距答案

【问题标题】：CSS Contact Form 7 SpacingCSS 联系表格 7 间距
【发布时间】：2020-06-06 14:22:30
【问题描述】：

我这辈子都搞不清楚表格上的间距。

你会看到所有的复选框都堆成一团，看起来很垃圾……你能帮忙编码传奇联盟吗？

http://200620.co.uk/

这是布局...

    <div class="wpcf7-wrap">
<div class="col-sm-6">
     [text* your-name placeholder "Name:"]
  </div>

<div class="col-sm-6">
     [text* your-email placeholder "Email:"]
  </div>

<div class="col-sm-6">
     [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"]
  </div>  

<div class="col-sm-6">
     [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"]
  </div>

<div class="col-sm-6">
     [text your-text-1 placeholder "Dietary Requirements:"]
  </div>

<div class="col-sm-6">What do you drink?
[checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]
</div>

<div class="col-sm-6">
     [text your-text-3 placeholder "What do you want to hear?"]
  </div>

<div class="col-sm-12">
     [textarea your-text-4 placeholder "Any Special Message for us?"]
  </div>

  <div class="col-xs-12 wpcf7-button-wrap">
    [submit "RSVP Baby"]
  </div>
</div>

【问题讨论】：

标签： css wordpress contact-form-7

【解决方案1】：

希望这能让您走上正轨。我会将您的复选框移动到其他 2x2 列之后，以便它一直穿过。另外.. 将整个东西包装在一个 div 中。注意不要在表单上添加额外的换行符，因为 Contact Form 7 使用“Auto-P”功能。

/*this should make the row stand on it's own*/
.checkbox-row {
  margin: 1.5rem 0 .5rem 0;
}

<div class="wpcf7-wrap">
    <div class="col-sm-6"> [text* your-name placeholder "Name:"] </div>
    <div class="col-sm-6"> [text* your-email placeholder "Email:"] </div>
    <div class="col-sm-6"> [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"] </div>
    <div class="col-sm-6"> [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"] </div>
    <div class="col-sm-6"> [text your-text-1 placeholder "Dietary Requirements:"] </div>
    <div class="col-sm-6"> [text your-text-3 placeholder "What do you want to hear?"] </div>
    <div class="col-sm-12 checkbox-row"><div>What do you drink? [checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]</div></div>
    <div class="col-sm-12"> [textarea your-text-4 placeholder "Any Special Message for us?"] </div>
    <div class="col-xs-12 wpcf7-button-wrap"> [submit "RSVP Baby"] </div>
</div>

【讨论】：

这绝对是一种享受 - 刚才没有响应式地打球 - 我试过 display:block 但她也不想打球，你能帮兄弟解决这个问题吗？
我会做这样的事情。 @media(max-width: 767px){.checkbox-row .wpcf7-list-item{display: block;}} 我认为你应该能够从中设计其余的样式？请不要忘记也接受答案:)
如果遇到困难请告诉我。

【解决方案2】：

只需在下面添加 CSS 代码。希望对您有所帮助。

.wpcf7-form-control.wpcf7-checkbox{
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

【讨论】：

检查它是否运行良好你可以试试“body .wpcf7-form-control wpcf7-checkbox{}”
添加了一个，添加了两个仍然没有移动... .wpcf7-form-control wpcf7-checkbox { float: left;宽度：100%；边距：0；填充：0； } body .wpcf7-form-control wpcf7-checkbox{} 它位于 wordpress 上的附加 CSS 部分中
对不起，您可以将“.wpcf7-form-control wpcf7-checkbox”替换为“.wpcf7-form-control.wpcf7-checkbox”