并排对齐两个输入字段

Question

我知道这是一个非常愚蠢的问题，但我已经尝试了所有方法（div 包装器、浮动 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

您需要为input box 添加宽度。那我就好好干吧```

input[type="text"] { //or your class 
width: 30%;
display: inline-block;
margin-right:20px; // to set some margin in the right
}

Answer 2

您的文本框正在使用全屏。

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

示例： HTML

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

风格

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