如何水平而不是垂直放置输入字段？

Question

我有一个来自 buddyboss-platform(1.8.5) 的 wordpress register.php 文件。

而且所有的输入域都在彼此之下，像这样：

Lable Email
Input field email
lable password
input field password

但我想让它们彼此相邻。像这样

lable Email           lable password
input field Email     input field password

当然，我尝试了很多。并且google了很多。但是输入字段保持垂直而不是水平

所以这是 register.php 文件：

<?php



?>

<?php bp_nouveau_signup_hook('before', 'page'); ?>


<div id="register-page" class="page register-page">

    <?php bp_nouveau_template_notices(); ?>

    <?php bp_nouveau_user_feedback(bp_get_current_signup_step()); ?>


        <form action=""  name="signup_form" id="signup-form box" class="standard-form signup-form clearfix" method="post" enctype="multipart/form-data">


            <?php if ('request-details' === bp_get_current_signup_step()) : ?>


                <?php bp_nouveau_signup_hook('after', 'account_details'); ?>

                <div class="register-section default-profile" id="basic-details-section">


                    <?php /***** Basic Account Details ******/ ?>


                </div><!-- #basic-details-section -->



                <?php bp_nouveau_signup_hook('after', 'account_details'); ?>

                <?php /***** Extra Profile Details ******/ ?>

                <?php if (bp_is_active('xprofile') && bp_nouveau_base_account_has_xprofile()) : ?>

                    <?php bp_nouveau_signup_hook('before', 'signup_profile'); ?>

                    <div class="register-section extended-profile" id="profile-details-section">



                        <?php /* Use the profile field loop to render input fields for the 'base' profile field group */ ?>
                        <?php while (bp_profile_groups()) : bp_the_profile_group(); ?>


                            <?php while (bp_profile_fields()) : bp_the_profile_field();


                                if (function_exists('bp_member_type_enable_disable') && false === bp_member_type_enable_disable()) {
                                    if (function_exists('bp_get_xprofile_member_type_field_id') && bp_get_the_profile_field_id() === bp_get_xprofile_member_type_field_id()) {
                                        continue;
                                    }
                                }
                            ?>
                                <div<?php bp_field_css_class('editfield');
                                    bp_field_data_attribute(); ?> <fieldset>
                                    <?php
                                    $field_type = bp_xprofile_create_field_type(bp_get_the_profile_field_type());
                                    $field_type->edit_field_html();
                                    ?>
                                    </fieldset>

                    </div>

                <?php endwhile; ?>

                <input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="<?php bp_the_profile_field_ids(); ?>" />

            <?php endwhile; ?>

            <?php bp_nouveau_signup_form(); ?>

    <?php bp_nouveau_signup_hook('', 'signup_profile'); ?>

</div><!-- #profile-details-section -->

<?php bp_nouveau_signup_hook('after', 'signup_profile'); ?>

<?php endif; ?>

</div><!-- //.layout-wrap -->

<?php bp_nouveau_signup_terms_privacy(); ?>

<?php bp_nouveau_submit_button('register'); ?>

<?php endif; // request-details signup step 
?>

<?php bp_nouveau_signup_hook('custom', 'steps'); ?>

</form>

</div>

<?php bp_nouveau_signup_hook('after', 'page'); ?>

我在 style.css 中试过这个

#box {
    display: flex;
    align-items: baseline;
  }

  #productSearch form input {
    vertical-align: middle;
}

但这不起作用。

还有一个旁注。我还在下载的 buddyboss-platform 中看到 register.php 在关闭 </form> 后有一个结尾 </div>。但是没有打开div。这合法吗？

我的问题。我必须改变什么？让这两个字段水平显示？

Answer 1

这主要是 CSS 问题，因为 buddypress 正在应用自己的风格。
尝试使用这个（如果不起作用，请申请更高的specificity）：

#basic-details-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 14px;
}

更高的特异性#register-page #signup-form #basic-details-section