移动设备上的输入字段很奇怪

Question

我有2个输入字段并排排列。它在桌面上工作正常，但在移动设备上它们很奇怪。下面是我的代码和手机屏幕截图。任何人都可以帮忙吗？提前谢谢。

你可以在这里看到它:(页脚中的框是问题） https://www.wondercatspopup.com/hakkinda/

<div style="display:flex;">
  <p class="form-row form-row-first">
    <label style="display:none!important;" for="billing_first_name"><?php _e('First name', 'woocommerce'); ?><span class="required">*</span></label>
    <input style="width: 130px;
        display: inline-block; margin-right:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="İsim *" type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if (!empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>"
    />


    <label style="display:none!important;" for="billing_last_name"><?php _e('Last name', 'woocommerce'); ?><span class="required">*</span></label>
    <input style="width: 130px;
        display: inline-block; margin-left:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Soyisim *" type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if (!empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>"
    />
  </p>
</div>

<p style="margin-bottom: 0px; margin-top: 10px;" class="form-row form-row-wide">

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

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

Answer 1

问题在于第一个div的display:flex。删除它，并修复对齐问题。