html - 宽度 :50% not working as expected

Question

我试图让每个部分的屏幕宽度达到 50%，但优惠券代码部分不起作用。我不确定这是我的 HTML 还是 CSS？刚刚编辑以添加我的其余 HTML!

示例:

HTML

<div class="CartCode cf">
    <div class="CouponCode">
            <h3>Coupon Code</h3>

        <script type="text/javascript">
            lang.EnterCouponCode = "Please enter your coupon code.";
        </script>
        <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
            <input type="hidden" name="action" value="applycoupon">
            <div class="CouponCode">
                <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
                <input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
                <input type="submit" value="Go" class="btn">
            </div>
        </form>
    </div>
    <div class="GiftCertificate">
            <h3>Redeem Gift Certificate</h3>

        <script type="text/javascript">
            lang.EnterGiftCertificateCode = "Please enter your gift certificate code.";
        </script>
        <form onsubmit="return Cart.CheckGiftCertificateCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
            <input type="hidden" name="action" value="applygiftcertificate">
            <div class="GiftCertificateCode">
                <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
                <input type="text" name="giftcertificatecode" id="giftcertificatecode" class="Textbox">
                <input type="submit" value="Go" class="btn">
            </div>
        </form>
    </div>
</div>

CSS

.cf:after {
    content:"";
    display: table;
    clear: both;
}
.CartCode .CouponCode, .CartCode .GiftCertificate {
    float: left;
    width: 50%;
}

Answer 1

这里有 2 个 CouponCode 类:

    <div class="CouponCode">//1st coupon code
            <h3>Coupon Code</h3>

        <script type="text/javascript">
            lang.EnterCouponCode = "Please enter your coupon code.";
        </script>
        <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
            <input type="hidden" name="action" value="applycoupon">

            <div class="CouponCode">//here is the 2nd

                <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
                <input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
                <input type="submit" value="Go" class="btn">
            </div>
        </form>
    </div>

删除它应该工作的二等 Ant ，如下所示:

<div class="CouponCode">
                <h3>Coupon Code</h3>

            <script type="text/javascript">
                lang.EnterCouponCode = "Please enter your coupon code.";
            </script>
            <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
                <input type="hidden" name="action" value="applycoupon">

                <div>

                    <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
                    <input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
                    <input type="submit" value="Go" class="btn">
                </div>
            </form>
        </div>

Here是示例代码。