Question

我知道这是一个非常愚蠢的问题但是我已经尝试了所有东西（div包装器，浮动div，p类）并且无法解决这个问题。我只是想并排排列第二列的“isim＆amp; 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
}

并排对齐两个输入字段

2 个答案: