CSS 联系表格 7 间距

Question

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

正如您所看到的那样，复选框都聚在一起，看起来很垃圾...编码传奇联盟可以帮忙吗？

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>

Answer 1

只需添加以下 CSS 代码。希望对你有帮助。

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

Answer 2

希望这能让您走上正轨。我会将您的复选框移动到其他 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>

CSS 联系表格 7 间距

CSS Contact Form 7 Spacing

css

wordpress

contact-form-7