联系表格7接受框和文本CSS样式

我有CF7WP插件

我把验收短代码[acceptance-524]和解释文本放在后面

我已经尝试了几种CSS解决方案，但我无法避免在第1行出现更高的行高，以及在第1行以下的行返回

以下问题的屏幕截图：

---

使用此Css，它工作正常

 .wpcf7-acceptance{



 input[type="checkbox"] {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin-right: 15px;
    width: 20px;
}
input[type="checkbox"]:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    background: #fcfcfc;
    border: 1px solid #aaa;
    border-radius: 2px;
}


 input[type="checkbox"]:checked:before {
    background: #000;
    border-color: #000;
}
 input[type="checkbox"]:disabled {
    color: #b8b8b8;
    cursor: auto;
}
 input[type="checkbox"]:disabled:before {
    box-shadow: none;
    background: #ddd;
}
 input[type="checkbox"]:checked:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}


 span.wpcf7-list-item{
   margin: 20px 0 0 0;
}

}

---

使用此Css，它工作正常

 .wpcf7-acceptance{



 input[type="checkbox"] {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin-right: 15px;
    width: 20px;
}
input[type="checkbox"]:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    background: #fcfcfc;
    border: 1px solid #aaa;
    border-radius: 2px;
}


 input[type="checkbox"]:checked:before {
    background: #000;
    border-color: #000;
}
 input[type="checkbox"]:disabled {
    color: #b8b8b8;
    cursor: auto;
}
 input[type="checkbox"]:disabled:before {
    box-shadow: none;
    background: #ddd;
}
 input[type="checkbox"]:checked:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}


 span.wpcf7-list-item{
   margin: 20px 0 0 0;
}

}

---

我认为这是第一个图标，可能是造成这个小空间的原因，如果你能包含人们可以帮助的标记。这里的代码最好是在你的问题中包含实际的代码，这样调试比只调试一张图片要好。试着编辑您的代码，并将代码与样式一起放在那里。如何显示所有内容（html、css和布局）？有了一个链接，我想这是第一个图标，是造成这个小空间的原因，也许你可以包含一些人们可以帮助的标记。这里的代码如果你在你的问题中包含实际的代码会更好，这样调试比只调试一张图片要好。试着编辑您的代码，并将代码与样式一起放在那里。如何显示所有内容（html、css和布局）？带链接