内联对齐 CF7 字段答案

【问题标题】：Inline align CF7 fields内联对齐 CF7 字段
【发布时间】：2019-12-05 10:35:41
【问题描述】：

正在处理 CF7 表单，但有 one issue 我需要帮助解决。我希望标签和字段位于同一行。我已经尝试将display:inline 放入 CSS 类中，但没有进行任何更改：

div.register-form {
  display: inline;
  width: 50%;
}

这是我的 CF7 表单中的完整代码：

<div class="register-form">
  <label> Name*
        [text* name-418] </label>

  <label> Last name*
        [text* lastname-418] </label>

  <label> Address*
        [text* address-418] </label>

  <label> Postal Code*
        [text* postalcode-418] </label>

  <label> City*
        [text* city-418] </label>

  <label> Country*
        [select* country-736 "United Kingdom" "Austria" "Belgium" "Bulgaria" "Canada" "Croatia" "Cyprus" "Czech Republic" "Denmark" "Estonia" "Finland" "France" "Germany" "Greece" "Hungary" "Ireland" "Italy" "Latvia" "Lithuania" "Luxembourg" "Malta" "Mexico" "Netherlands" "Poland" "Portugal" "Romania" "Slovakia" "Slovenia" "Spain" "Sweden" "United Arab Emirates" "United Kingdom" "United States of America"] </label>

  <label> Email*
        [email* email-638] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Batch Number*
        [number* batchnumber1-616] </label>

  <label> Batch Number 2*
        [number* batchnumber2-616] </label>

  <label> Batch Number 3*
        [number* batchnumber3-616] </label>

  <h3>Workshop Information</h3>

  <label> Id/Name*
        [text* idname-418] </label>

  <label> City*
        [text* workshopcity-418] </label>

  <label> Postal Code*
        [text* workshoppostalcode-418] </label>

  <label> Phone*
        [tel* telephone2-531] </label> [acceptance acceptance1-220] Yes, I agree to the terms and conditions of the Warranty and Data Protection Policy.* [/acceptance] [acceptance acceptance2-220] I give my consent to my personal data being processed
  for the execution of commercial, promotional and/or advertising shipments, including communications by email. [/acceptance]

  <small>* Mandatory Fields</small> [submit "Register"]
</div>

我想看起来像这样one这里有什么帮助吗？

【问题讨论】：

标签： css wordpress contact-form-7

【解决方案1】：

您只需要遵循 Compac 网站的代码即可。

.wpcf7 span.wpcf7-form-control-wrap {
    float: right;
    margin-top: -30px;
    position: relative;
    width: 80%;
    border-bottom: 1px solid grey;
}

删除评论

.wpcf7-form label {
    text-transform: uppercase;
    font-size: 13px;
    color: #1a1a1a;
    display: block;
    position: relative;
    /* padding-bottom: 15px; */
    /* border-bottom: 2px solid #e5e5e5; */
}

输出：

【讨论】：

添加代码时，表单会变得一团糟。请参阅infinitistone.co.uk/test-form
我可以看到它在移动端不好，您可以添加媒体查询将它们分开。否则，您可以使用像阴影答案这样的网格系统。您需要针对该答案添加自定义样式。答案是根据您尝试复制/启发的网站给出的:)

【解决方案2】：

你可以用 HTML 和 CSS 做到这一点

在 Contact Form 7 表单框中添加您的 HTML。然后在你的 CSS 样式中获得效果。

<div class="col-4"><label>Name*</label></div>
<div class="col-8">[text* name-418]</div>

【讨论】：

你的意思是它不起作用？当你检查表单时，你能看到 div 吗？当您分配样式时，它们是否生效？你清除缓存了吗？

【解决方案3】：

使用联系表 7 的 Smart Grid-Layout Responsive Design 扩展名。

它有一个 UI 编辑器，允许您将表单设计为一行中的一组列，每个单元格包含一个字段。

【讨论】：