css - 内联对齐 CF7 字段

Question

使用 CF7 表格，但有一个问题需要帮助解决。我希望标签和字段位于同一行。我已经尝试将display:inlineCSS 放入类中，但没有进行任何更改：

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>

我想看起来像这样有帮助吗？

标签： csswordpresscontact-form-7

Answer 1

You just need to follow the code of the Compac site.

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

Remove the commented

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

Output: