复选框对齐问题CSS

Question

我在将复选框与标签对齐时有一个问题，我尝试的每一项努力都在提交按钮上移动到同一行中：/

如果有人可以提供任何帮助：D

将我的头发拉出去。

.woocommerce form .form-row .input-checkbox[type="checkbox"] {
  display: inline;
}
.woocommerce form .form-row label {
  font-size: 11px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 10px;
  line-height: 1;
  /* alignment-baseline: auto; */
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.woocommerce form .woocommerce-checkout-payment .form-row input.button {
  background-color: #366796;
}

<div class="form-row place-order">
  <noscript>
			Since your browser does not support JavaScript, or it is disabled, please ensure you click the &lt;em&gt;Update Totals&lt;/em&gt; button before placing your order. You may be charged more than the amount stated above if you fail to do so.			&lt;br/&gt;&lt;input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Update totals" /&gt;
		</noscript>
  <p class="form-row terms wc-terms-and-conditions">
    <input type="checkbox" class="input-checkbox" name="terms" id="terms">
    <label for="terms" class="label">I’ve read and accept the <a href="https://propmanjobs.co.uk/terms/" target="_blank">terms &amp; conditions</a> <span class="required">*</span></label>
    <input type="hidden" name="terms-field" value="1">
  </p>
  <input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Continue to payment" data-value="Place order">
  <input type="hidden" id="_wpnonce" name="_wpnonce" value="f3a08df9e8"><input type="hidden" name="_wp_http_referer" value="/checkout/?wc-ajax=update_order_review"> </div>

Answer 1

尝试vertical-align属性...

.woocommerce form .form-row .input-checkbox[type="checkbox"] {
  display: inline;
}
.woocommerce form .form-row label {
  font-size: 11px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 10px;
  line-height: 1;
  /* alignment-baseline: auto; */
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.woocommerce form .woocommerce-checkout-payment .form-row input.button {
  background-color: #366796;
}
.input-checkbox {
  vertical-align: middle;
}

<div class="form-row place-order">
  <noscript>
			Since your browser does not support JavaScript, or it is disabled, please ensure you click the &lt;em&gt;Update Totals&lt;/em&gt; button before placing your order. You may be charged more than the amount stated above if you fail to do so.			&lt;br/&gt;&lt;input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Update totals" /&gt;
		</noscript>
  <p class="form-row terms wc-terms-and-conditions">
    <input type="checkbox" class="input-checkbox" name="terms" id="terms">
    <label for="terms" class="label">I’ve read and accept the <a href="https://propmanjobs.co.uk/terms/" target="_blank">terms &amp; conditions</a> <span class="required">*</span></label>
    <input type="hidden" name="terms-field" value="1">
  </p>
  <input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Continue to payment" data-value="Place order">
  <input type="hidden" id="_wpnonce" name="_wpnonce" value="f3a08df9e8"><input type="hidden" name="_wp_http_referer" value="/checkout/?wc-ajax=update_order_review"> </div>