html - 输入字段在移动设备上表现怪异

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 上。删除它，对齐问题应该得到解决。