php - 并排对齐两个输入字段

Question

我知道这是一个非常愚蠢的问题，但我已经尝试了所有方法(div 包装器、 float div、p 类)，但无法弄清楚。我只想并排对齐第二列上的“isim & soyisim”字段(这些是姓名字段)。我的代码有问题，但我找不到它，这让我发疯。任何帮助将不胜感激。在这里查看:

http://www.wondercatspopup.com/hesabim/

代码如下:

     <p class="form-row form-row-first">
          <label style="display:none!important;" for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?>
            <span class="required">
             *
            </span>
          </label>

          <input type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="İsim *" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
    
         <label style="display:none!important;" for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
         <input type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Soyisim *" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
       
      </p>

      <p class="form-row form-row-wide">

          <label style="display:none!important;" for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>
          <input type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Telefon *" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />
      </p>

       <div class="clear"></div>

Answer 1

您的文本框使用了屏幕的全宽。

尝试使用 display: inline-block 属性为文本框设置特定宽度。

示例: HTML

<div>
<input type="text" name="firstname" />
<input type="text" name="lastname" />
</div>

风格

input[type="text"] {
    width: 150px;
    display: inline-block;
}