使用 CSS 更改表单布局

Question

我在 CSS 方面需要一些帮助。

我的网站上有优惠券表格，我想更改布局。我希望优惠券表格的字段和按钮在 1 行中，优惠券表格占宽度的 100%。我该怎么做？

<div class="coupon-form">
        <p class="field">
            <input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
        </p>
        <p class="button">
            <button type="button" class="button" name="apply_coupon" value="Apply">Apply</button>
        </p>
        <div class="clear"></div>
    </div>

Answer 1

您可以将此代码添加到您的 css 类:

.coupon-form {
   display: flex;
}

.coupon-form > .field, 
.coupon-form .input-text {
   width: 100%; 
}

使用 CSS 更改表单布局

Changing form layout with CSS

html

forms

input

coupon