将可变宽度网格对齐,同时将其元素对齐到左侧

Question

考虑以下

<div class="container">
     <div class="grid">
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
          ....
      </div>
</div>

使用图像,基本上我拥有的是这样的东西

如您所见,绿色块和容器对齐在左侧

我想要实现的是这样的.

该.unit元件具有恒定的宽度

该.grid元件应具有宽度扩大(使更多的unit元件将配合到1线)同时被始终内居中.container.

任何线索如何使用CSS(如果需要可能还有一些html包装器)来实现它？

Answer 1

在 CSS 中，确保： 1. 在.grid规则中，text-align设置为center 2. 在.unit规则中，display设置为inline-block。该div元素是块级元素，因此每个新元素都显示在新行上。为该display属性指定值会inline-block强制所有div具有 class 的 sunit显示在同一行上（直到没有更多空间）。也不text-align : center适用于显示属性设置为 的元素block，并且块级元素的显示值block默认为 。