如何在一行中设置某些输入字段的宽度？

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>