Why does a floating child element prevent the parent's padding from pushing elements inwards?

huangapple
go评论100阅读模式
英文:

Why does a floating child element prevent the parent's padding from pushing elements inwards?

问题

It seems you'd like a translation of the code portion in your message. Here's the translated code:

  1. h1 {
  2.   color: blue;
  3.   padding-left: .75em;
  4. }
  6. p {
  7.   padding-left: 1.50em;
  8. }
  10. div {
  11.   margin-bottom: 0.5em;
  12. }
  14. label {
  15.   float: left;
  16.   width: 16em;
  17.   text-align: right;
  18. }
  20. input {
  21.   margin-left: 1em;
  22. }
  24. .formDiv {
  25.   text-align: center;
  26. }
  28. #border {
  29.   border: .25em solid blue;
  30.   display: inline-block;
  31. }
  33. #calculate,
  34. #clear {
  35.   margin-bottom: 1em;
  36. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="salesTax.css">
  8.   <title>Sales Tax Calculator</title>
  9. </head>
  11. <body>
  12.   <main>
  13.     <div id="border">
  14.       <h1>Sales Tax Calculator</h1>
  15.       <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  16.       <form>
  17.         <div class="formDiv">
  18.           <label for="subtotal">Subtotal:</label>
  19.           <input type="text" id="subtotal">
  20.         </div>
  21.         <div class="formDiv">
  22.           <label for="taxRate">Tax Rate:</label>
  23.           <input type="text" id="taxRate">
  24.         </div>
  25.         <div class="formDiv">
  26.           <label for="salesTax">Sales Tax:</label>
  27.           <input type="text" id="salesTax" disabled>
  28.         </div>
  29.         <div class="formDiv">
  30.           <label for="total">Total:</label>
  31.           <input type="text" id="total" disabled>
  32.         </div>
  33.         <div class="formDiv">
  34.           <input type="button" id="calculate" value="Calculate">
  35.           <input type="button" id="clear" value="Clear">
  36.         </div>
  37.       </form>
  38.     </div>
  39.     <script src="salesTax.js"></script>
  40.   </main>
  41. </body>
  43. </html>

Please note that this is a direct translation, and if you have any specific questions about the code or its functionality, feel free to ask.

英文:

Why does a floating child element prevent the parent's padding from pushing elements inwards? vs. what I have:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. h1 {
  2. color: blue;
  3. padding-left: .75em;
  4. }
  5. p {
  6. padding-left: 1.50em;
  7. }
  8. div {
  9. margin-bottom: 0.5em;
  10. }
  11. label {
  12. float: left;
  13. width: 16em;
  14. text-align: right;
  15. }
  16. input {
  17. margin-left: 1em;
  18. }
  19. .formDiv {
  20. text-align: center;
  21. }
  22. #border {
  23. border: .25em solid blue;
  24. display: inline-block;
  25. }
  26. #calculate,
  27. #clear {
  28. margin-bottom: 1em;
  29. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;salesTax.css&quot;&gt;
  7. &lt;title&gt;Sales Tax Calculator&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;main&gt;
  11. &lt;div id=&quot;border&quot;&gt;
  12. &lt;h1&gt;Sales Tax Calculator&lt;/h1&gt;
  13. &lt;p&gt;Enter Subtotal and Tax Rate and click &quot;Calculate&quot;.&lt;/p&gt;
  14. &lt;form&gt;
  15. &lt;div class=&quot;formDiv&quot;&gt;
  16. &lt;label for=&quot;subtotal&quot;&gt;Subtotal:&lt;/label&gt;
  17. &lt;input type=&quot;text&quot; id=&quot;subtotal&quot;&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;formDiv&quot;&gt;
  20. &lt;label for=&quot;taxRate&quot;&gt;Tax Rate:&lt;/label&gt;
  21. &lt;input type=&quot;text&quot; id=&quot;taxRate&quot;&gt;
  22. &lt;/div&gt;
  23. &lt;div class=&quot;formDiv&quot;&gt;
  24. &lt;label for=&quot;salesTax&quot;&gt;Sales Tax:&lt;/label&gt;
  25. &lt;input type=&quot;text&quot; id=&quot;salesTax&quot; disabled&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;formDiv&quot;&gt;
  28. &lt;label for=&quot;total&quot;&gt;Total:&lt;/label&gt;
  29. &lt;input type=&quot;text&quot; id=&quot;total&quot; disabled&gt;
  30. &lt;/div&gt;
  31. &lt;div class=&quot;formDiv&quot;&gt;
  32. &lt;input type=&quot;button&quot; id=&quot;calculate&quot; value=&quot;Calculate&quot;&gt;
  33. &lt;input type=&quot;button&quot; id=&quot;clear&quot; value=&quot;Clear&quot;&gt;
  34. &lt;/div&gt;
  35. &lt;/form&gt;
  36. &lt;/div&gt;
  37. &lt;script src=&quot;salesTax.js&quot;&gt;&lt;/script&gt;
  38. &lt;/main&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

<!-- end snippet -->

As far as I can tell, the float: left applied to the labels here is causing them to fill up as much of #formDiv as possible to get the labels to the left of the inputs. Since I want the labels and inputs to be more centered, I thought I would apply padding to the #border, but all that does is expand it outward rather than pushing the inner elements inwards.

Why is that? Is there anything I can do to prevent that without removing any of the provided CSS? (The only CSS I can delete parts of is the CSS for #border. The rest is part of the specification, but can be added onto.)

答案1

得分: 1

Padding不能“推进”已经达到最小宽度的内容。 display: inline-block 使 <div id="border"> 的宽度不会超过其内容。因此，padding-right 增加了 <div id="border"> 的宽度。

唯一的方法来“推进”内部元素是减小这些元素的宽度。

英文:

Padding cannot "push in" the contents that are already at the minimum width. display: inline-block causes &lt;div id=&quot;border&quot;&gt; to be no wider than its contents. Therefore, padding-right increases the width of &lt;div id=&quot;border&quot;&gt;.

The only way to "push in" the inner elements would be to reduce the width of those elements.

答案2

得分: 0

很可能，在你的情况下，使用&lt;table&gt;是合适的：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. #border {
  8.   border: .25em solid blue;
  9.   padding: 20px;
  10.   max-width: 600px;
  11. }
  13. #border h1 {
  14.   color: blue;
  15.   margin-bottom: 10px;
  16. }
  18. #border p {
  19.   margin-bottom: 10px;
  20. }
  22. #border table {
  23.   margin: 0 auto;
  24. }
  26. #border table td {
  27.   padding-bottom: 10px;
  28. }
  30. #border table td:first-child {
  31.   text-align: right;
  32.   padding-right: 10px;
  33. }
  1. <main>
  2.   <div id="border">
  3.     <h1>Sales Tax Calculator</h1>
  4.     <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  5.     <form>
  6.       <table>
  7.         <tr>
  8.           <td><label for="subtotal">Subtotal:</label></td>
  9.           <td><input type="text" id="subtotal"></td>
  10.         </tr>
  11.         <!-- ... (其他表格行) ... -->
  12.       </table>
  13.     </form>
  14.   </div>
  15. </main>

更新。 如果你对表格有恐惧 🙃：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. #border {
  8.   border: .25em solid blue;
  9.   padding: 20px;
  10.   max-width: 600px;
  11.   display: flex;
  12.   flex-direction: column;
  13. }
  15. #border h1 {
  16.   color: blue;
  17.   margin-bottom: 10px;
  18. }
  20. #border p {
  21.   margin-bottom: 10px;
  22. }
  24. #border form {
  25.   margin: 0 auto;
  26.   display: grid;
  27.   grid-template-columns: auto auto;
  28.   grid-gap: 10px;
  29. }
  31. #border form label {
  32.   text-align: right;
  33. }
  1. <div id="border">
  2.   <h1>Sales Tax Calculator</h1>
  3.   <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  4.   <form>
  5.     <label for="subtotal">Subtotal:</label>
  6.     <input type="text" id="subtotal">
  7.     <!-- ... (其他表单元素) ... -->
  8.   </form>
  9. </div>
英文:

Probably, in your case, the use of a &lt;table&gt; will be appropriate:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. #border {
  7. border: .25em solid blue;
  8. padding: 20px;
  9. max-width: 600px;
  10. }
  11. #border h1 {
  12. color: blue;
  13. margin-bottom: 10px;
  14. }
  15. #border p {
  16. margin-bottom: 10px;
  17. }
  18. #border table {
  19. margin: 0 auto;
  20. }
  21. #border table td {
  22. padding-bottom: 10px;
  23. }
  24. #border table td:first-child {
  25. text-align: right;
  26. padding-right: 10px;
  27. }

<!-- language: lang-html -->

  1. &lt;main&gt;
  2. &lt;div id=&quot;border&quot;&gt;
  3. &lt;h1&gt;Sales Tax Calculator&lt;/h1&gt;
  4. &lt;p&gt;Enter Subtotal and Tax Rate and click &quot;Calculate&quot;.&lt;/p&gt;
  5. &lt;form&gt;
  6. &lt;table&gt;
  7. &lt;tr&gt;
  8. &lt;td&gt;&lt;label for=&quot;subtotal&quot;&gt;Subtotal:&lt;/label&gt;&lt;/td&gt;
  9. &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;subtotal&quot;&gt;&lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;tr&gt;
  12. &lt;td&gt;&lt;label for=&quot;taxRate&quot;&gt;Tax Rate:&lt;/label&gt;&lt;/td&gt;
  13. &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;taxRate&quot;&gt;&lt;/td&gt;
  14. &lt;/tr&gt;
  15. &lt;tr&gt;
  16. &lt;td&gt;&lt;label for=&quot;salesTax&quot;&gt;Sales Tax:&lt;/label&gt;&lt;/td&gt;
  17. &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;salesTax&quot; disabled&gt;&lt;/td&gt;
  18. &lt;/tr&gt;
  19. &lt;tr&gt;
  20. &lt;td&gt;&lt;label for=&quot;total&quot;&gt;Total:&lt;/label&gt;&lt;/td&gt;
  21. &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;total&quot; disabled&gt;&lt;/td&gt;
  22. &lt;/tr&gt;
  23. &lt;tr&gt;
  24. &lt;td&gt;&lt;/td&gt;
  25. &lt;td&gt;
  26. &lt;input type=&quot;button&quot; id=&quot;clear&quot; value=&quot;Clear&quot;&gt;
  27. &lt;input type=&quot;button&quot; id=&quot;calculate&quot; value=&quot;Calculate&quot;&gt;
  28. &lt;/td&gt;
  29. &lt;/tr&gt;
  30. &lt;/table&gt;
  31. &lt;/form&gt;
  32. &lt;/div&gt;
  33. &lt;/main&gt;

<!-- end snippet -->

Update. If you have a phobia of tables 🙃:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. #border {
  7. border: .25em solid blue;
  8. padding: 20px;
  9. max-width: 600px;
  10. display: flex;
  11. flex-direction: column;
  12. }
  13. #border h1 {
  14. color: blue;
  15. margin-bottom: 10px;
  16. }
  17. #border p {
  18. margin-bottom: 10px;
  19. }
  20. #border form {
  21. margin: 0 auto;
  22. display: grid;
  23. grid-template-columns: auto auto;
  24. grid-gap: 10px;
  25. }
  26. #border form label {
  27. text-align: right;
  28. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;border&quot;&gt;
  2. &lt;h1&gt;Sales Tax Calculator&lt;/h1&gt;
  3. &lt;p&gt;Enter Subtotal and Tax Rate and click &quot;Calculate&quot;.&lt;/p&gt;
  4. &lt;form&gt;
  5. &lt;label for=&quot;subtotal&quot;&gt;Subtotal:&lt;/label&gt;
  6. &lt;input type=&quot;text&quot; id=&quot;subtotal&quot;&gt;
  7. &lt;label for=&quot;taxRate&quot;&gt;Tax Rate:&lt;/label&gt;
  8. &lt;input type=&quot;text&quot; id=&quot;taxRate&quot;&gt;
  9. &lt;label for=&quot;salesTax&quot;&gt;Sales Tax:&lt;/label&gt;
  10. &lt;input type=&quot;text&quot; id=&quot;salesTax&quot; disabled&gt;
  11. &lt;label for=&quot;total&quot;&gt;Total:&lt;/label&gt;
  12. &lt;input type=&quot;text&quot; id=&quot;total&quot; disabled&gt;
  13. &lt;span&gt;&lt;/span&gt;
  14. &lt;span&gt;
  15. &lt;input type=&quot;button&quot; id=&quot;clear&quot; value=&quot;Clear&quot;&gt;
  16. &lt;input type=&quot;button&quot; id=&quot;calculate&quot; value=&quot;Calculate&quot;&gt;
  17. &lt;/span&gt;
  18. &lt;/form&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

以下是您要翻译的内容：

如果您可以通过#border选择器添加样式，那么您可以轻松地覆盖其他样式。

可能的示例：

  1. div#border {
  2.   max-width: max-content;
  3.   padding-right: 2em;
  4.   margin: auto;
  5.   display: grid;/* or inline-grid */
  6.   justify-content: center;
  7. }
  9. #border .formDiv {
  10.   display: flex;
  11.   justify-content: center;
  12. }
  14. #border label {
  15.   width: auto;
  16.   flex: 1;
  17. }

用于测试渲染的片段：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. h1 {
  5.   color: blue;
  6.   padding-left: .75em;
  7. }
  9. p {
  10.   padding-left: 1.50em;
  11. }
  13. div {
  14.   margin-bottom: 0.5em;
  15. }
  17. label {
  18.   float: left;
  19.   width: 16em;
  20.   text-align: right;
  21. }
  23. input {
  24.   margin-left: 1em;
  25. }
  27. .formDiv {
  28.   text-align: center;
  29. }
  31. #border {
  32.   border: .25em solid blue;
  33.   display: inline-block;
  34. }
  36. #calculate,
  37. #clear {
  38.   margin-bottom: 1em;
  39. }
  40. /* 如果已经定义了前一个样式，请覆盖它 */
  41. div#border {
  42.   max-width: max-content;
  43.   padding-right: 2em;
  44.   margin: auto;
  45.   display: grid;/* or inline-grid without max-width/padding/margin */
  46.   justify-content: center;
  47. }
  49. #border .formDiv {
  50.   display: flex;
  51.   justify-content: center;
  52. }
  54. #border label {
  55.   width: auto;
  56.   flex: 1;
  57. }
  59. <!-- language: lang-html -->
  60. <!DOCTYPE html>
  61. <html>
  63. <head>
  64.   <meta charset="utf-8">
  65.   <meta name="viewport" content="width=device-width, initial-scale=1">
  66.   <link rel="stylesheet" href="salesTax.css">
  67.   <title>Sales Tax Calculator</title>
  68. </head>
  70. <body>
  71.   <main>
  72.     <div id="border">
  73.       <h1>Sales Tax Calculator</h1>
  74.       <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  75.       <form>
  76.         <div class="formDiv">
  77.           <label for="subtotal">Subtotal:</label>
  78.           <input type="text" id="subtotal">
  79.         </div>
  80.         <div class="formDiv">
  81.           <label for="taxRate">Tax Rate:</label>
  82.           <input type="text" id="taxRate">
  83.         </div>
  84.         <div class="formDiv">
  85.           <label for="salesTax">Sales Tax:</label>
  86.           <input type="text" id="salesTax" disabled>
  87.         </div>
  88.         <div class="formDiv">
  89.           <label for="total">Total:</label>
  90.           <input type="text" id="total" disabled>
  91.         </div>
  92.         <div class="formDiv">
  93.           <input type="button" id="calculate" value="Calculate">
  94.           <input type="button" id="clear" value="Clear">
  95.         </div>
  96.       </form>
  97.     </div>
  98.     <script src="salesTax.js"></script>
  99.   </main>
  100. </body>
  102. </html>
  104. <!-- end snippet -->
英文:

If you can add style via the #border selector, then you can easily overwrite other styles.

Possible example :

  1. div#border {
  2. max-width: max-content;
  3. padding-right: 2em;
  4. margin: auto;
  5. display: grid;/* or inline-grid */
  6. justify-content: center;
  7. }
  8. #border .formDiv {
  9. display: flex;
  10. justify-content: center;
  11. }
  12. #border label {
  13. width: auto;
  14. flex: 1;
  15. }

snippet to test render

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. h1 {
  2. color: blue;
  3. padding-left: .75em;
  4. }
  5. p {
  6. padding-left: 1.50em;
  7. }
  8. div {
  9. margin-bottom: 0.5em;
  10. }
  11. label {
  12. float: left;
  13. width: 16em;
  14. text-align: right;
  15. }
  16. input {
  17. margin-left: 1em;
  18. }
  19. .formDiv {
  20. text-align: center;
  21. }
  22. #border {
  23. border: .25em solid blue;
  24. display: inline-block;
  25. }
  26. #calculate,
  27. #clear {
  28. margin-bottom: 1em;
  29. }
  30. /* overwrite previous style if already defined */
  31. div#border {
  32. max-width: max-content;
  33. padding-right: 2em;
  34. margin: auto;
  35. display: grid;/* or inline-grid without max-width/padding/margin */
  36. justify-content: center;
  37. }
  38. #border .formDiv {
  39. display: flex;
  40. justify-content: center;
  41. }
  42. #border label {
  43. width: auto;
  44. flex: 1;
  45. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;salesTax.css&quot;&gt;
  7. &lt;title&gt;Sales Tax Calculator&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;main&gt;
  11. &lt;div id=&quot;border&quot;&gt;
  12. &lt;h1&gt;Sales Tax Calculator&lt;/h1&gt;
  13. &lt;p&gt;Enter Subtotal and Tax Rate and click &quot;Calculate&quot;.&lt;/p&gt;
  14. &lt;form&gt;
  15. &lt;div class=&quot;formDiv&quot;&gt;
  16. &lt;label for=&quot;subtotal&quot;&gt;Subtotal:&lt;/label&gt;
  17. &lt;input type=&quot;text&quot; id=&quot;subtotal&quot;&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;formDiv&quot;&gt;
  20. &lt;label for=&quot;taxRate&quot;&gt;Tax Rate:&lt;/label&gt;
  21. &lt;input type=&quot;text&quot; id=&quot;taxRate&quot;&gt;
  22. &lt;/div&gt;
  23. &lt;div class=&quot;formDiv&quot;&gt;
  24. &lt;label for=&quot;salesTax&quot;&gt;Sales Tax:&lt;/label&gt;
  25. &lt;input type=&quot;text&quot; id=&quot;salesTax&quot; disabled&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;formDiv&quot;&gt;
  28. &lt;label for=&quot;total&quot;&gt;Total:&lt;/label&gt;
  29. &lt;input type=&quot;text&quot; id=&quot;total&quot; disabled&gt;
  30. &lt;/div&gt;
  31. &lt;div class=&quot;formDiv&quot;&gt;
  32. &lt;input type=&quot;button&quot; id=&quot;calculate&quot; value=&quot;Calculate&quot;&gt;
  33. &lt;input type=&quot;button&quot; id=&quot;clear&quot; value=&quot;Clear&quot;&gt;
  34. &lt;/div&gt;
  35. &lt;/form&gt;
  36. &lt;/div&gt;
  37. &lt;script src=&quot;salesTax.js&quot;&gt;&lt;/script&gt;
  38. &lt;/main&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

<!-- end snippet -->

答案4

得分: -1

如果我理解问题正确，那么向包裹输入（按钮）的 div 添加以下内容应该可以实现您想要的结果：

  1. display: flex;
  2. justify-content: center;
  1. <div class="btns">
  2.   <input type="button" id="calculate" value="Calculate">
  3.   <input type="button" id="clear" value="Clear">
  4. </div>
英文:

If I understand the question properly, then adding:

  1. display: flex;
  2. justify-content: center;

to the div that wraps the inputs (buttons) should achieve the result you're looking for:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. h1 {
  2. color: blue;
  3. padding-left: .75em;
  4. }
  5. p {
  6. padding-left: 1.50em;
  7. }
  8. div {
  9. margin-bottom: 0.5em;
  10. }
  11. label {
  12. float: left;
  13. width: 16em;
  14. text-align: right;
  15. }
  16. input {
  17. margin-left: 1em;
  18. }
  19. #border {
  20. border: .25em solid blue;
  21. display: inline-block;
  22. }
  23. #calculate,
  24. #clear {
  25. margin-bottom: 1em;
  26. }
  27. .btns {
  28. display: flex;
  29. justify-content: center;
  30. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;salesTax.css&quot;&gt;
  7. &lt;title&gt;Sales Tax Calculator&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;main&gt;
  11. &lt;div id=&quot;border&quot;&gt;
  12. &lt;h1&gt;Sales Tax Calculator&lt;/h1&gt;
  13. &lt;p&gt;Enter Subtotal and Tax Rate and click &quot;Calculate&quot;.&lt;/p&gt;
  14. &lt;form&gt;
  15. &lt;div id=&quot;formDiv&quot;&gt;
  16. &lt;label for=&quot;subtotal&quot;&gt;Subtotal:&lt;/label&gt;
  17. &lt;input type=&quot;text&quot; id=&quot;subtotal&quot;&gt;
  18. &lt;/div&gt;
  19. &lt;div id=&quot;formDiv&quot;&gt;
  20. &lt;label for=&quot;taxRate&quot;&gt;Tax Rate:&lt;/label&gt;
  21. &lt;input type=&quot;text&quot; id=&quot;taxRate&quot;&gt;
  22. &lt;/div&gt;
  23. &lt;div id=&quot;formDiv&quot;&gt;
  24. &lt;label for=&quot;salesTax&quot;&gt;Sales Tax:&lt;/label&gt;
  25. &lt;input type=&quot;text&quot; id=&quot;salesTax&quot; disabled&gt;
  26. &lt;/div&gt;
  27. &lt;div id=&quot;formDiv&quot;&gt;
  28. &lt;label for=&quot;total&quot;&gt;Total:&lt;/label&gt;
  29. &lt;input type=&quot;text&quot; id=&quot;total&quot; disabled&gt;
  30. &lt;/div&gt;
  31. &lt;div id=&quot;formDiv&quot; class=&quot;btns&quot;&gt;
  32. &lt;input type=&quot;button&quot; id=&quot;calculate&quot; value=&quot;Calculate&quot;&gt;
  33. &lt;input type=&quot;button&quot; id=&quot;clear&quot; value=&quot;Clear&quot;&gt;
  34. &lt;/div&gt;
  35. &lt;/form&gt;
  36. &lt;/div&gt;
  37. &lt;script src=&quot;salesTax.js&quot;&gt;&lt;/script&gt;
  38. &lt;/main&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月15日 02:28:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76249072.html
  • css
  • css-float
  • html
  • padding
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定