並排對齊兩個輸入字段

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

您的文本框正在使用整個屏幕寬度。

嘗試使用display：inline-block屬性為文本框設置特定的寬度。

示例：HTML

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

樣式

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

Answer 2

您需要在input box添加寬度。 然后我會工作的很好。''

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