css - 将标题和字段放在其他联系表旁边 7

Question

我使用联系表 7。

表单的html代码:

<div class="clearfix">
    <div id="left">
        First name [text first-name]<br/>
        Last name [text last-name]<br/>
        How Did You Find Us? [text text-find-us]
    </div>
    <div id="right">
    Email [email* your-email] <br/>
    Phone [text your-phone]
    </div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]

如何将“名字”与用户输入他/她的名字的文本框放在同一行？

Answer 1

不确定 Contact Form 7 如何使用括号内的标签呈现 html。您可以使用 CSS/HTML 来定位元素。

HTML:

<div class="clearfix">
    <div id="left">
    <span class="label">First name</span><span class="form-input">[text first-name]</span><br/>
    <span class="label">Last name</span><span class="form-input">[text last-name]</span><br/>
    <span class="label">How Did You Find Us?</span><span class="form-input">[text text-find-us]</span>
    </div>
    <div id="right">
    <span class="label">Email</span><span class="form-input">[email* your-email]</span><br/>
    <span class="label">Phone</span><span class="form-input">[text your-phone]</span>
    </div>
</div>

CSS:

div#left {
  float: left;
  width: 400px;
}
div#right {
  float:left;
  width: 400px;
}
span.label {
  float: left;
  width: 180px;
}
span.form-input {
  float: left;
  width: 200px;
}

fiddle :https://jsfiddle.net/mediaguru/f1e68999/