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

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

Answer 2

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

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