如何为collect div添加响应式样式：992px以下设左右20px内边距

你可以通过CSS媒体查询实现这个需求，当屏幕宽度小于992px时，给.collect类设置左右各20px的内边距：

/* 大屏幕下的默认样式（宽度≥992px），可根据需求调整 */
.collect {
  /* 这里可以定义桌面端的布局样式，比如无额外内边距 */
}

/* 响应式规则：屏幕宽度<992px时生效 */
@media (max-width: 991px) {
  .collect {
    padding-left: 20px;
    padding-right: 20px;
  }
}

这段代码的作用：

• 当浏览器窗口宽度小于992px时，.collect元素会自动在左右两侧添加20px内边距，避免和屏幕边缘贴合；
• 屏幕宽度≥992px时，会沿用你原本设置的样式（如果没有额外定义，就不会有这20px的内边距）。

结合你提供的HTML结构，完整的可运行代码示例如下：

<div class="collect">
    <img class="price-icon" src="images/price.png" alt="priceicon">
    <input class="price" type="number" min="0.10" step="0.01" placeholder="Price of a Lot">

    <img class="number-icon" src="images/number.png" alt="numbericon">
    <input class="number" type="number" min="1" step="1" placeholder="Number of Lots">

    <button onclick="createTable()" class="calculate">Calculate</button>
</div>

<style>
/* 可选：添加基础布局样式优化内部元素排列 */
.collect {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 991px) {
  .collect {
    padding-left: 20px;
    padding-right: 20px;
  }
}
</style>

内容的提问来源于stack exchange，提问作者asamet