你需要一个two-third
列CSS和如下布局:
----------------------------------------------
| .two-third | .one-third |
----------------------------------------------
| .one-half | .one-half | |
-----------------------------| Submit |
| Name column | Email column | button |
-----------------------------| column |
| Acceptance column | |
----------------------------------------------
因此,CSS规则:
...
表示您的代码完整)
.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
...
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; } /* Add this */
.one-fourth {width: 22%;}
...
@media only screen and (max-width: 767px) {
/* Add the .two-third here, or somewhere else where appropriate based on your
preferred mobile layout / design. */
.one-half, .one-third, .two-third {
...
}
}
/*Horizontal form only*/
...
/* Add this.. */
.wpcf-accept {
clear: both;
}
...
HTML部分:(为了清晰起见,缩进)
<div class="wpcf-wrap">
<div class="two-third">
<div class="one-half">
<label> Your Name (required)
[text* your-name] </label>
</div>
<div class="one-half last">
<label> Your E-mail (required)
[email* your-email] </label>
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="/">agreement</a> of
the personal data processing [/acceptance]
</div>
</div><!-- .two-third -->
<div class="one-third last">
[submit "Send"]
</div>
</div>
[response]
尝试演示
here.