html - CSS-如何将类的副本组织到一个列中

Question

所以我有这样的东西:

                       <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>

连同我的 CSS 看起来像这样:

https://jsfiddle.net/hh77xg1t/1/

显然这是不切实际的，但目前工作正常。但后来我添加了另一个这样的元素

                        <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>

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

https://jsfiddle.net/hh77xg1t/3/

有没有一种方法可以在不为每个产品输入不同的边距左值的情况下解决这个问题？换句话说，是否有类似 margin-left 的东西，除了不是从最近的元素开始测量边距，我可以指定从模态最左边开始的边距？

Answer 1

您是否考虑过使用具有某些内置结构(例如表格或列表)的东西？从您所解释的内容来看，这些解决方案中的任何一个似乎都可以实现您所追求的目标。

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

CSS:

table, tr, td {
 border: none;
}