Question

在我的情况下，您是否偶然知道如何在div内将到期日期和安全代码的输入字段对齐。我已经尝试了一切，但无法解决此问题

<div class="container-fluid" style=" width:37%; margin-left:115px;background-color:#212361; height:500px;">
    <form class="pay-form">

        <h2 style="color:#707070">Invoice</h1>
        <div class="container-wrapper" style=" margin-left:45px;">
            <img src="slike/payment/american_express.png" style="border-radius : 90%; height:80px; width:22%;">
            <img src="slike/payment/jcb.png" style="border-radius : 50%; height:100px; width:22%;">
            <img src="slike/payment/master_card.png" style="border-radius : 50%; height:100px; width:22%;">
            <img src="slike/payment/visa.png" style="border-radius : 50%; height:90px; width:22%;">   
        </div>

        <p style="color:#707070">Card number</p>
        <input type="text" style="width:80%" name="card_number" required>
        <p style="color:#707070">Name on card</p>
        <input type="text" style="width:80%;" name="name_on_card" required>
  
        <div class="col-md-6">
            <p style="color:#707070;">Expiry date</p>
            <input type="text" style="width:100%" name="expiry date" required>
        </div>
        <div class="col-md-6">
            <p style="color:#707070;">Security code</p>
            <input type="text" style="width:100%" name="security_code" required>
        </div>
            
        <p style="color:#707070">Email</p>
        <input type="text" style="width:80%" name="email" required>
        <br>
        <br>
        <button>GO</button>
            
    </form>
</div>

Answer 1

我看到您在代码中使用Bootstrap。但是，只用类.col-md-6包装这两个字段，该类将在左右两边增加15px的边距。您需要做的是使用Expiry date类包装Security code和.col-md-12上方和下方的所有其他字段

<div class="container-fluid" style=" width:37%; margin-left:115px;background-color:#212361; height:500px;">
    <form class="pay-form">

        <div class="col-md-12">
            <h2 style="color:#707070">Invoice</h1>
            <div class="container-wrapper" style=" margin-left:45px;">
                <img src="slike/payment/american_express.png" style="border-radius : 90%; height:80px; width:22%;">
                <img src="slike/payment/jcb.png" style="border-radius : 50%; height:100px; width:22%;">
                <img src="slike/payment/master_card.png" style="border-radius : 50%; height:100px; width:22%;">
                <img src="slike/payment/visa.png" style="border-radius : 50%; height:90px; width:22%;">   
            </div>
        </div>

        <div class="col-md-12">
            <p style="color:#707070">Card number</p>
            <input type="text" style="width:80%" name="card_number" required>
        </div>

        <div class="col-md-12">
            <p style="color:#707070">Name on card</p>
            <input type="text" style="width:80%;" name="name_on_card" required>
        </div>

        <div class="col-md-6">
            <p style="color:#707070;">Expiry date</p>
            <input type="text" style="width:100%" name="expiry date" required>
        </div>
        <div class="col-md-6">
            <p style="color:#707070;">Security code</p>
            <input type="text" style="width:100%" name="security_code" required>
        </div>

        <div class="col-md-12">
            <p style="color:#707070">Email</p>
            <input type="text" style="width:80%" name="email" required>
        </div>

        <div class="col-md-12">
            <br>
            <br>
            <button>GO</button>
        </div>

    </form>
</div>

Answer 2

这就是您想要的 CODEPEN DEMO

<div class="container-fluid" style=" width:37%; margin-left:115px;background-color:#212361; height:500px;">
  <form class="pay-form">
    <h2 style="color:#707070">Invoice</h2>
      <div class="container-wrapper" style=" margin-left:45px;">
        <img src="slike/payment/american_express.png" style="border-radius : 90%; height:80px; width:22%;">
        <img src="slike/payment/jcb.png" style="border-radius : 50%; height:100px; width:22%;">
        <img src="slike/payment/master_card.png" style="border-radius : 50%; height:100px; width:22%;">
        <img src="slike/payment/visa.png" style="border-radius : 50%; height:90px; width:22%;">
      </div>
      <div style="box-sizing: border-box; width:80%">
        <p style="color:#707070">Card number</p>
        <input type="text" style="width:100%" name="card_number" required>
        <p style="color:#707070">Name on card</p>
        <input type="text" style="width:100%;" name="name_on_card" required>

        <div class="row">
          <span class="col-6 mr-0">
            <p style="color:#707070;">Expiry date</p>
            <input type="text" style="width:100%" name="expiry date" required>
          </span>
          <span class="col-6 ml-0">
            <p style="color:#707070;">Security code</p>
            <input type="text" style="width:100%" name="security_code" required>
         </span>
        </div>
        <p style="color:#707070">Email</p>
        <input type="text" style="width:100%" name="email" required>
        <br><br>
        <button>GO</button>
      </div>

  </form>
</div>

尝试对齐html / css中的输入表单

2 个答案:

这就是您想要的 CODEPEN DEMO