4 个联系表 7 个字段在一行中答案

【问题标题】：4 Contact Form 7 fields in one line4 个联系表 7 个字段在一行中
【发布时间】：2018-09-15 05:20:33
【问题描述】：

我正在尝试制作一个联系表单，其中包括 4 个字段在同一行中一个接一个，在平板电脑或移动设备中，这些字段将是 100% 宽度下的一个。

其实我已经尝试了很多，我被 css 弄糊涂了。

这是我使用的 CSS：

.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: right;
    margin-bottom: 20px;

}

.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
margin-left: 0 !important;
clear: left;
}

@media only screen and (max-width: 767px) {
.one-half, .one-third {
    width: 100%;
    margin-right: 0;
}
}

形式是：

<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>

【问题讨论】：

float: right;margin-right: 4%; 必须是 float: left;margin-left: 4%; 用于桌面。您还希望在桌面上以单行显示字段，并且在响应时这应该在下面一一显示？
这个怎么样？ codepen.io/anon/pen/vRzwBM
为什么不使用Smart Grid-layout for CF7 extension，它允许您使用 UI 编辑器构建网格布局表单。您可以轻松地在一行中创建 4 列，并在每列中放置标签以获得您正在查看的结果。
非常感谢！工作得很好

标签： css wordpress contact-form contact-form-7

【解决方案1】：

将这些属性赋予给浮动 LIKE 的元素的父 div

<div class="container">
    <div class="one-half">
    [text* Fullname placeholder "full name"]
    </div>
    <div class="one-half">
    [tel* phone placeholder "phone"]
    </div>
    <div class="one-half">
    [email* email placeholder "email"]
    </div>
    <div class="one-half last">
    [submit "SEND"] </div>
</div>

CSS：

container:after{
    content:'';
    display:table;
    clear:both;
}

【讨论】：

【解决方案2】：

Your e-mail*: <span style="display:inline-block;">[email* your-email]</span> <span style="display:inline-block;">[submit "Send"]</span>

【讨论】：