Html CSS如何将类的副本组织到单个列中

所以我有这样的想法：

                       <div class="modalProd" id="Box1">
                        <span class ="modalProduct">
                            Box1
                        </span>
                        <span class = "modalQuantity">
                            Quantity: 0
                        </span>
                        <span class = "modalPrice">
                            $0
                        </span>
                        <span class="removeModal">
                            -
                        </span>
                        <span class = "addModal" >
                            +
                        </span>
                    </div>
                    <div class="modalProd" id="Box2">
                        <span class ="modalProduct">
                            Box2
                        </span>
                        <span class = "modalQuantity">
                            Quantity: 0
                        </span>
                        <span class = "modalPrice">
                            $0
                        </span>
                        <span class="removeModal">
                            -
                        </span>
                        <span class = "addModal" >
                            +
                        </span>
                    </div>

框1
数量：0
$0
-
+
框2
数量：0
$0
-
+

加上我的css，它看起来像这样：

显然，这是不切实际的，但目前效果良好。但是我添加了另一个类似的项目

                        <div id="Clothes1">
                        <span class ="modalProduct">
                            Clothes1
                        </span>
                        <span class = "modalQuantity">
                            Quantity: 0
                        </span>
                        <span class = "modalPrice">
                            $0
                        </span>
                        <span class="removeModal">
                            -
                        </span>
                        <span class = "addModal" >
                            +
                        </span>
                    </div>

衣服1
数量：0
$0
-
+

您可以清楚地看到它是如何弄乱格式的：

---

是否有一种方法可以解决此问题，而无需为每个产品输入不同的剩余利润值？换言之，是否有类似于左边距的东西，除了从最近的元素测量边距之外，我可以从模式最左边的边缘指定边距？

您是否考虑过使用一些内置结构的东西，例如表或列表？从你的解释来看，似乎这些解决方案中的任何一个都能实现你所追求的目标

   <div id="Clothes1">
    <table>
    <tr>
     <td class=" ">Clothes1</td>
     <td>Quantity: 0</td>
     <td>$0</td>
     <td>-</td>
     <td class=" ">+</td>
    </tr>
    </table>
   </div>

---

这是因为每个元素没有特定的宽度，

Box1

和

Box2

的宽度是相同的，因为它们有相同的字母数，而

Closes1

的宽度比其他两个元素更大，所以数量的边距有点偏移，试试这个

.modalProd {
 width:100%;
}
.modalProd > span{
 width:32%;
 display:inline-block;
 margin:0;
}
.modalProd .addModal{
 width:3%;
}




<div class="modalProd" id="Box1">
   <span class="modalProduct">
       Box1
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>
<div class="modalProd" id="Box2">
   <span class="modalProduct">
       Box2
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>
<div class="modalProd" id="Clothes1"> /* add modalProd class here, it wasn't there in your original code */
   <span class="modalProduct">
       Clothes1
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>

.modalProd{
宽度：100%；
}
.modalProd>span{
宽度：32%；
显示：内联块；
保证金：0；
}
.modalProd.addModal{
宽度：3%；
}
框1
数量：0
$0
-
+
框2
数量：0
$0
-
+
/*在这里添加modalProd类，它不在原始代码中*/
衣服1
数量：0
$0
-
+

您应该使所有span元素具有

显示：内联块

。这允许您指定跨度的宽度、高度、边距和填充，同时将它们保持在同一水平行上

还将所有行元素的流体宽度设置为100%。我为+和-元素添加了2米的宽度，并使用

calc

css函数从总宽度中减去该宽度

---

请查看此

将所有内容包装在

中。然后把你的每一块包装起来，比如盒子1、盒子2、衣服等等。进入

以生成表格行。然后将行中的每个条目包装在

中。这是一个有点劳动密集型的过程，但这确实是使用html正确完成任务的唯一方法。您可以使用

表{border:none；}

隐藏css中的表边框，也许我做错了什么，但当我尝试此操作时，每个元素都被粘在一起，中间没有空格

.modalProd {
 width:100%;
}
.modalProd > span{
 width:32%;
 display:inline-block;
 margin:0;
}
.modalProd .addModal{
 width:3%;
}




<div class="modalProd" id="Box1">
   <span class="modalProduct">
       Box1
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>
<div class="modalProd" id="Box2">
   <span class="modalProduct">
       Box2
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>
<div class="modalProd" id="Clothes1"> /* add modalProd class here, it wasn't there in your original code */
   <span class="modalProduct">
       Clothes1
   </span>
   <span class="modalQuantity">
       Quantity: 0
   </span>
   <span class="modalPrice">
       $0
   </span>
   <span class="removeModal">
       -
   </span>
   <span class="addModal">
       +
   </span>
</div>