寬度：50％未按預期工作

我試圖讓每個部分的屏幕寬度爲50％，但優惠券代碼部分無法正常工作。我不確定它是我的HTML還是CSS？剛剛編輯添加我的HTML的其餘部分！寬度：50％未按預期工作

例子：

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%; 
}

來源

2014-09-23 Als

請作出一個jsfiddle – 2014-09-23 15:27:30

似乎你的html的最後一部分缺失 – 2014-09-23 15:28:09

加入.CartCode .CouponCode，.CartCode .GiftCertificate另一個屬性：position：absolute; – 2014-09-23 15:31:12

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

Here是示例代碼。

來源

2014-09-23 15:29:59

現在完美無缺 - 謝謝！ – Als 2014-09-23 15:35:02

寬度：50％未按預期工作

回答

相關問題