宽度:50%未按预期工作

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>

删除它应该工作的第二类蚂蚁,就像这里:

<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>

这是示例代码.