如何在 html 中将表单移动到另一个表单旁边？

Question

我目前在我的网站上有一个“编辑帐户详细信息”页面，但我想自定义 html，以便 密码更改部分 位于 旁边主要细节部分，所以左边没有很大的空间。

当前页面（截图）：http://prntscr.com/8n9hkt
这是我当前的代码：http://pastebin.com/hGUSAvz0

我知道这是可能的，但我只是不知道代码以及我应该把它放在哪里。

Answer 1

给你。记得添加 .floatable（你喜欢的宽度）和 .wrapper 样式：

CSS:
.wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.floatable{
    float: left;
    width: 250px;
}

<?php
/**
 * Edit account form
 *
 * @author              WooThemes
 * @package     WooCommerce/Templates
 * @version     2.2.7
 */

if ( ! defined( 'ABSPATH' ) ) {
        exit; // Exit if accessed directly
}

?>

<?php wc_print_notices(); ?>

<form action="" method="post">

        <?php do_action( 'woocommerce_edit_account_form_start' ); ?>
    <div class="wrapper">
        <div class="floatable">
            <legend><?php _e( 'Main Details', 'woocommerce' ); ?></legend>
            <p class="form-row form-row-first">
                <label for="account_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
                <br>
                <input type="text" class="input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
            </p>
            <p class="form-row form-row-last">
                <label for="account_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
                <br>
                <input type="text" class="input-text" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
            </p>
            <div class="clear"></div>

            <p class="form-row form-row-wide">
                <label for="account_email"><?php _e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
                <br>
                <input type="email" class="input-text" name="account_email" id="account_email" value="<?php echo esc_attr( $user->user_email ); ?>" />
            </p>
        </div>
        <fieldset>
            <legend><?php _e( 'Password Change', 'woocommerce' ); ?></legend>

            <p class="form-row form-row-wide">
                <label for="password_current"><?php _e( 'Current Password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
                <input type="password" class="input-text" name="password_current" id="password_current" />
            </p>
            <p class="form-row form-row-wide">
                <label for="password_1"><?php _e( 'New Password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
                <input type="password" class="input-text" name="password_1" id="password_1" />
            </p>
            <p class="form-row form-row-wide">
                <label for="password_2"><?php _e( 'Confirm New Password', 'woocommerce' ); ?></label>
                <input type="password" class="input-text" name="password_2" id="password_2" />
            </p>
        </fieldset> 
    </div>

        <?php do_action( 'woocommerce_edit_account_form' ); ?>

        <p>
                <?php wp_nonce_field( 'save_account_details' ); ?>
                <input type="submit" class="button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>" />
                <input type="hidden" name="action" value="save_account_details" />
        </p>

        <?php do_action( 'woocommerce_edit_account_form_end' ); ?>

</form>