如何在一行中設置某些輸入字段的寬度？

Question

我在弄清楚如何使輸入字段的寬度有意義時遇到了很多麻煩。

我已經嘗試了盡可能多的CSS屬性，但是它們似乎都沒有達到預期的效果。 我用百分比和EM嘗試了Width，我嘗試了顯示：表和表單元格，我嘗試了浮動和文本對齊。 CSS讓我發瘋...

我希望每行的總計與小計和總計在右邊對齊，但我希望數量和價格要小得多，並且商品名稱要占大部分寬度。 而且隨着窗口大小的變化，我希望數量，價格和總數保持必要的大小，並且商品名稱始終保持剩余寬度。 而且我希望這條線永遠不必分成兩行，有時這也在發生。 那只會使一切變得更糟...

希望我必須盡可能少地編輯HTML的格式，或者根本不編輯HTML的格式，因為執行數學運算的JavaScript很大程度上取決於該格式。 我嘗試添加一個跨度，但它破壞了我的腳本，反正看起來並沒有任何改善。 （JavaScript的，因為它必須如何設置，所描述的那種挑剔這里 。）

有什么可以做得到我想要的方式嗎？

這是我得到的：

  function doInvoiceMath(line) { var wholeLine = line.parentNode; // Gets the <div> var fields = wholeLine.children; // Gets all the fields var quantity = fields[2].value; // Get the quantity var price = fields[3].value; // Get the value fields[4].innerHTML = "$" + Math.round((quantity * price)*100)/100; // Calculate the total for the total child: Math.round() * 100/100 will round to second decimal place var totals = document.getElementsByClassName("wpdsd_total"); var runningTotal = 0; for (index = 0; index < totals.length; ++index){ currentTotal = totals[index].innerHTML; while(currentTotal.charAt(0) === '$'){currentTotal = currentTotal.substr(1)} runningTotal = runningTotal + parseFloat(currentTotal); } document.getElementById("wpdsd_subtotal").innerHTML = Math.round(runningTotal * 100)/100; } 

  .wpdsd_line{ } .wpdsd_item{ } .wpdsd_qty{ } .wpdsd_price{ } .wpdsd_total{ } #wpdsd_invoice_totals{ text-align: right; } 

 <div class="wpdsd_line_titles"> <span class="wpdsd_item_title">Item</span> <span class="wpdsd_qty_title">Quantity</span> <span class="wpdsd_price_title">Price</span> <span class="wpdsd_total_title">Total</span> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_0" value="71"> <input type="text" class="wpdsd_item" name="wpdsd_item_0" value="1m 8 Pin"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_0" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_0" step="0.01" value="4" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_0">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_1" value="45"> <input type="text" class="wpdsd_item" name="wpdsd_item_1" value="3m USB Type-C"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_1" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_1" step="0.01" value="5.52" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_1">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_2" value="76"> <input type="text" class="wpdsd_item" name="wpdsd_item_2" value="Wall Charger"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_2" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_2" step="0.01" value="4.69" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_2">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_3" value="78"> <input type="text" class="wpdsd_item" name="wpdsd_item_3" value="car charger"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_3" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_3" step="0.01" value="3.69" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_3">$0.00</span><br /> </div> <input type="hidden" name="wpdsd_number_of_lines" value="4"> <div id="wpdsd_invoice_totals"> Subtotal: $<span id="wpdsd_subtotal">0.00</span><br /> Taxes: $<span id="wpdsd_taxes">0.00</span><br /> Total: $<span id="wpdsd_total">0.00</span></div> </div> 

Answer 1

這聽起來像flexbox的工作。 請轉到此鏈接並嘗試： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

以我的經驗，處理同一行中的項目最好的方法是flexbox。 對於不同的大小，您可以在class或nth-child上使用max-width。

而且，您可能知道，可以使用媒體查詢@media（最大寬度：somepx）來解決響應問題。

Answer 2

最佳做法是使用桌子

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

您仍然可以按類名進行選擇，並且將具有更多的謂詞表和更多的語義標記

 function doInvoiceMath(startingPoint) { var startingTD = startingPoint.parentNode; var invoiceLine = startingTD.parentNode; var invoiceCells = invoiceLine.children; var quantityCell = invoiceCells[1].children; var quantity = quantityCell[0].value; var priceCell = invoiceCells[2].children; var price = priceCell[0].value; var totalCell = invoiceCells[3].children; totalCell[0].innerHTML = Math.round((quantity * price) * 100) / 100; var totals = document.getElementsByClassName("wpdsd_total"); var runningTotal = 0; for (index = 0; index < totals.length; ++index) { currentTotal = totals[index].innerHTML; runningTotal = runningTotal + parseFloat(currentTotal); } document.getElementById("wpdsd_subtotal").innerHTML = Math.round(runningTotal * 100) / 100; document.getElementById("wpdsd_taxes").innerHTML = Math.round((document.getElementById("wpdsd_subtotal").innerHTML * 0.13) * 100) / 100; document.getElementById("wpdsd_total").innerHTML = Math.round((parseFloat(document.getElementById("wpdsd_subtotal").innerHTML) + parseFloat(document.getElementById("wpdsd_taxes").innerHTML)) * 100) / 100; } 

 #wpdsd_invoice_table { width: 100%; } .wpdsd_table_heading { text-align: left; } .wpdsd_white_space { color: white; } .wpdsd_product_cell { width: auto; } .wpdsd_product_cell input { width: 100%; } .wpdsd_quantity_cell { width: 110px; } .wpdsd_quantity_cell input { width: 100%; } .wpdsd_price_cell { width: 80px; white-space: nowrap; } .wpdsd_price_cell input { width: 90%; } .wpdsd_total_cell { text-align: right; width: 50px; } .wpdsd_totals_cell { text-align: right; width: auto; } 

 <table id="wpdsd_invoice_table"> <tr> <th class="wpdsd_table_heading">Item</th> <th class="wpdsd_table_heading">Quantity</th> <th class="wpdsd_table_heading"><span class="wpdsd_white_space">$</span>Price</th> <th class="wpdsd_total_cell">Total</th> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_0" value="71"> <input type="text" name="wpdsd_item_0" value="1m 8 Pin"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_0" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_0" step="0.01" value="4" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_0">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_1" value="45"> <input type="text" name="wpdsd_item_1" value="3m USB Type-C"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_1" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_1" step="0.01" value="5.52" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_1">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_2" value="76"> <input type="text" name="wpdsd_item_2" value="Wall Charger"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_2" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_2" step="0.01" value="4.69" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_2">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_3" value="78"> <input type="text" name="wpdsd_item_3" value="car charger"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_3" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_3" step="0.01" value="3.69" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_3">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> <input type="hidden" name="wpdsd_number_of_lines" value="4"> Subtotal: $<span id="wpdsd_subtotal">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> Taxes: $<span id="wpdsd_taxes">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> Total: $<span id="wpdsd_total">0.00</span> </td> </tr> </table>