如何在wordpress中显示两个相邻的输入字段？

Question

我尝试让两个输入字段彼此相邻。我有六个输入字段。并且四个是一致的。但是有两个不符合。我只是无法解决这个问题。

这是我的css：

.register-section-form, .editfield.field_3.field_gebruikersnaamnickname,.bb-signup-field.signup_email   {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 14px;
} 



.bb-signup-field.signup_password,
.bb-signup-field.signup_password_confirm {

  display: inline-block;
  min-width: 48.8%;
  grid-column-gap: 14px;
}

所以它是关于昵称和电子邮件的。它们不是内联的。

我无法解决这个问题。

所以它看起来像这样：

这是html：

<form action="" name="signup_form" id="signup-form" class="standard-form signup-form " method="post" enctype="multipart/form-data">
   <div>
      <div class="register-section default-profile" id="basic-details-section">
      </div>
      <!-- #basic-details-section -->
      <div class="register-section extended-profile  register-section-form  " id="profile-details-section">
         <div  class="editfield field_1 field_voornaam field_order_0 required-field visibility-public field_type_textbox" data-index="0" ">
            <fieldset>
               <div>
                  <legend id="field_1-1">
                     <style>{font-family:bold}</style>
                     Voornaam                                               
                  </legend>
                  <input  id="field_1" name="field_1" type="text" value="" aria-required="true" aria-labelledby="field_1-1" aria-describedby="field_1-3">
               </div>
            </fieldset>
         </div>
         <div  class="editfield field_2 field_achternaam field_order_1 required-field visibility-public alt field_type_textbox" data-index="1" ">
            <fieldset>
               <div>
                  <legend id="field_2-1">
                     achternaam                                             
                  </legend>
                  <input  id="field_2" name="field_2" type="text" value="" aria-required="true" aria-labelledby="field_2-1" aria-describedby="field_2-3">
               </div>
            </fieldset>
         </div>
         <div  class="editfield field_3 field_gebruikersnaamnickname field_order_2 required-field visibility-public field_type_textbox" data-index="2" ">
            <fieldset>
               <div>
                  <legend id="field_3-1">
                     Gebruikersnaam(nickname)                                               
                  </legend>
                  <input  id="field_3" name="field_3" type="text" value="" aria-required="true" aria-labelledby="field_3-1" aria-describedby="field_3-3">
               </div>
            </fieldset>
         </div>
         <input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="1,2,3" />
      </div>
      <!-- #profile-details-section -->
      <div class="bb-signup-field signup_email">
         <label for="signup_email">Email </label><input type="email" name="signup_email" id="signup_email"  value=""   aria-required="true" />          
         <div id="email-strength-result"></div>
      </div>
      <div class="bb-signup-field signup_password">
         <label for="signup_password">Password </label>
         <div class="bb-password-wrap"><a href="#" class="bb-toggle-password"><i class="bb-icon-eye"></i></a><input type="password" name="signup_password" id="signup_password"  class="password-entry" value=""   aria-required="true" spellcheck="false" autocomplete="off" /></div>
         <div id="pass-strength-result"></div>
      </div>
      <div class="bb-signup-field signup_password_confirm">
         <label for="signup_password_confirm">Confirm Password </label>
         <div class="bb-password-wrap"><a href="#" class="bb-toggle-password"><i class="bb-icon-eye"></i></a><input type="password" name="signup_password_confirm" id="signup_password_confirm"  class="password-entry-confirm" value=""   aria-required="true" spellcheck="false" autocomplete="off" /></div>
      </div>
   </div>
   <!-- //.layout-wrap -->  
</form>

Answer 1

基于您使用 Flex 提供的 HTML：https://jsfiddle.net/r4wjczn6/

.register-section{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.editfield {
  width: 100%;
}

.field_1, .field_2{
  width: 50%;
}

基于您使用 Grid 提供的 HTML：https://jsfiddle.net/jqL2d941/

.register-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.editfield {
  grid-column: 1 / span 2;
}

.field_1{
  grid-column: 1 / span 1;
}

.field_2{
  grid-column: 2 / span 1;
}