检出表在前端无法正确呈现

Question

我创建了一个具有自动递增功能的结帐表，用于列出网站的3种产品，但由于某种原因，其前端出现了变形。我需要每个产品的总价格要随着数量的调整而增加。下面随附的是CSS，HTML和JS代码。任何帮助都将得到事先感谢。谢谢。

/* Set rates + misc */
var taxRate = 0.0825;
var fadeTime = 300;

/* Assign actions */
$(".product-quantity-l3 input").change(function() {
  updateQuantity(this);
});

/* Recalculate cart */
function recalculateCart() {
 var subtotal = 0;

  /* Sum up row totals */
  $(".product-l3").each(function() {
    subtotal += parseFloat(
    $(this)
    .children(".product-line-price-l3")
    .text()
    );
  });

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

 /* Update totals display */
  $(".totals-value-l3").fadeOut(fadeTime, function() {
   $("#cart-subtotal-l3").html(subtotal.toFixed(2));
   $("#cart-tax-l3").html(tax.toFixed(2));
   $("#cart-total-l3").html(total.toFixed(2));
   if (total == 0) {
    $(".checkout-l3").fadeOut(fadeTime);
   } else {
    $(".checkout-l3").fadeIn(fadeTime);
    }
    $(".totals-value-l3").fadeIn(fadeTime);
  });
 }

 /* Update quantity */
 function updateQuantity(quantityInput) {
  /* Calculate line price */
  var productRow = (quantityInput)
   .parent()
   .parent();
  var price = parseFloat(productRow.children(".product-price-l3").text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;

  /* Update line price display and recalc cart totals */
  productRow.children(".product-line-price-l3").each(function() {
   $(this).fadeOut(fadeTime, function() {
    $(this).text(linePrice.toFixed(2));
     recalculateCart();
     $(this).fadeIn(fadeTime);
    });
  });
}

/* Add here all your css styles (customizations) */
/* Global settings */
/* Global "table" column settings */
.product-details-l3 {
float: left;
width: 37%;
}
.product-price-l3 {
 float: left;
 width: 12%;
}
.product-quantity-l3 {
float: left;
 width: 10%;
}
.product-line-price-l3 {
 float: left;
 width: 12%;
 text-align: right;
}
/* This is used as the traditional .clearfix class */
.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 
{
 content: "";
 display: table;
}
.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 
{
  clear: both;
}
.group-l3 .shopping-cart-l3 .column-labels-l3, .product-l3 .totals-item-l3 
{
 zoom: 1;
}
/* Apply clearfix in a few places */
/* Apply dollar signs */
.product-l3 .product-price-l3 .product-line-price-l3 .totals-value-l3 {
 content: "$";
}
/* Body/Header stuff */
 }
h1 {
  font-weight: 100;
}
label {
 color: #aaa;
}
.shopping-cart-l3 {
  margin-top: -45px;
}
/* Column headers */
.column-labels-l3 .label-l3 {
 padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.column-labels-l3 .product-image-l3 .product-details-l3 {
  text-indent: -9999px;
}
 /* Product entries */
.product-l3 {
 margin-bottom: 20px;
 padding-bottom: 10px;
 border-bottom: 1px solid #eee;
}
.product-l3 .product-details-l3 .product-title-l3 {
 margin-right: 20px;
  font-family: "Helvetica Neue Medium";
}
.product-l3 .product-quantity-l3 input {
  width: 40px;
}
/* Totals section */
.totals-l3 .totals-item-l3 {
 float: left;
 clear: both;
  width: 80%;
  margin-bottom: 10px;
}
.totals-l3 .totals-item-l3 .label-l3 {
 float: left;
  clear: both;
 width: 80%;
  text-align: right;
}
.totals-l3 .totals-item-l3 .totals-value-l3 {
 float: right;
 width: 20%;
  text-align: right;
}   
.totals-l3 .totals-item-total-l3 {
 font-family: "Helvetica Neue Medium";
}
.checkout-l3 {
 float: left;
  border: 0;
  margin-top: 20px;
  padding: 6px 11px;
  background-color: #6b6;
  color: #fff;
  font-size: 20px;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Products</h1>

<div class="shopping-cart-l3">

<div class="column-labels-l3">
<label class="product-details-l3">Product</label>
<label class="product-price-l3">Price</label>
<label class="product-quantity-l3">Quantity</label>
<label class="product-line-price-l3">Total</label>
 </div>

 <div class="product-l3">
   <div class="product-details-l3">
  <div class="product-title-l3">Product 1</div>
   </div>
   <div class="product-price-l3">95.00</div>
  <div class="product-quantity-l3">
  <input type="number" value="0" min="0">
   </div>

  <div class="product-line-price-l3">0.00</div>
 </div>

<div class="product-l3">
<div class="product-details-l3">
  <div class="product-title-l3">Product 2</div>
 </div>
  <div class="product-price-l3">60.00</div>
  <div class="product-quantity-l3">
  <input type="number" value="0" min="0">
 </div>
 <div class="product-line-price-l3">0.00</div>
 </div>

<div class="product-l3">
<div class="product-details-l3">
  <div class="product-title-l3">Product 3</div>
  </div>
  <div class="product-price-l3">45.00</div>
<div class="product-quantity-l3">
  <input type="number" value="0" min="0">
  </div>
  <div class="product-line-price-l3">0.00</div>
  </div>

 <div class="totals-l3">
<div class="totals-item-l3">
  <label>Subtotal</label>
  <div class="totals-value-l3" id="cart-subtotal-l3">0.00</div>
</div>
<div class="totals-item-l3">
  <label>Tax (8.25%)</label>
  <div class="totals-value-l3" id="cart-tax-l3">0.00</div>
</div>
<div class="totals-item-l3 totals-item-total-l3">
  <label>Grand Total</label>
  <div class="totals-value-l3" id="cart-total-l3">0.00</div>
</div>
 </div>

 <button class="checkout-l3">Checkout</button>

</div>