容器中具有相对位置的元素不会与 display: inline 水平对齐

Question

我试图让这些元素在行中对齐到容器的末尾，而不是溢出它。但是即使我将 display:inline 应用于每个单独的元素，它们也不会对齐。向左飘浮;似乎在顶行留下了很大的空白，我不确定是什么导致这一切发生。

.itemShopDaily {
  margin-bottom: 0.2em;
  display: -ms-grid;
  display: grid;
  grid-gap: 0.2em;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(6,0.1fr);
}
.itemShopWeekly {

}
.itemContainer {
    width: 116px;
    height: 116px;
    position: relative;
    padding: 0;
    border-image-slice: 20;
    border-width: 4px;
    border-style: solid;
    margin-right: 10px;
    margin-bottom: 0px;
    display: inline-block;
}
.itemDetails {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    width: 100%;
}
.itemName {
    background: rgba(0,7,36,0.5);
    padding: 3px 0;
    text-align: center;
    color: white;
    font-size: 1em;
}
.itemPrice {
    font-weight: bold;
    background-color: #000724;
    width: 100%;
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: white;
}
.itemPrice img {
    width: 1.5em;
    padding-right: 0.3rem;
    display: block;
}

<div class='itemShopDaily'>
        <div class="itemContainer testItem">
          <img src="URL" class="itemImage">
          <div class="itemDetails">
              <div class="itemName">SAMPLE</div>
              <div class="itemPrice">
                  <img src="URL" />
                  <span>Sample</span>
              </div>
        </div>
        <div class="itemContainer testItem">
          <img src="URL" class="itemImage">
          <div class="itemDetails">
              <div class="itemName">SAMPLE</div>
              <div class="itemPrice">
                  <img src="URL" />
                  <span>Sample</span>
              </div>
        </div>
        <div class="itemContainer testItem">
          <img src="URL" class="itemImage">
            <div class="itemDetails">
              <div class="itemName">SAMPLE</div>
              <div class="itemPrice">
                  <img src="URL" />
                  <span>Sample</span>
             </div>
        </div>
</div>

是什么导致了这种情况，为什么它们不能水平对齐，为什么 display-inline 不起作用？ 此处还提供了一个工作示例：http://fortniteprosnipes.x10.bz

Answer 1

正确格式化您的代码并且它可以工作，因为您会发现您忘记了许多关闭 </div> 标记！

.itemShopDaily {
    margin-bottom: 0.2em;
    display: -ms-grid;
    display: grid;
    grid-gap: 0.2em;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(6,0.1fr);
}
.itemShopWeekly {

}
.itemContainer {
    width: 116px;
    height: 116px;
    position: relative;
    padding: 0;
    border-image-slice: 20;
    border-width: 4px;
    border-style: solid;
    margin-right: 10px;
    margin-bottom: 0px;
    display: inline-block;
}
.itemDetails {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    width: 100%;
}
.itemName {
    background: rgba(0,7,36,0.5);
    padding: 3px 0;
    text-align: center;
    color: white;
    font-size: 1em;
}
.itemPrice {
    font-weight: bold;
    background-color: #000724;
    width: 100%;
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: white;
}
.itemPrice img {
    width: 1.5em;
    padding-right: 0.3rem;
    display: block;
}

<div class='itemShopDaily'>
    <div class="itemContainer testItem">
        <div class="itemDetails">
            <div class="itemName">SAMPLE</div>
            <div class="itemPrice">
                <span>Sample</span>
            </div>
        </div>
    </div>
    <div>
        <div class="itemContainer testItem">
            <div class="itemDetails">
                <div class="itemName">SAMPLE</div>
                <div class="itemPrice">
                    <span>Sample</span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="itemContainer testItem">
            <div class="itemDetails">
                <div class="itemName">SAMPLE
                </div>
                <div class="itemPrice">
                    <span>Sample</span>
                </div>
            </div>
        </div>
    </div>
</div>

还有一个更简单的版本：

.itemShopDaily {
    margin-bottom: 0.2em;
}
.itemContainer {
    width: 116px;
    height: 116px;
    position: relative;
    border: 4px solid;
    margin-right: 10px;
    float: left;
}
.itemDetails {
    position: absolute;
    bottom: 0;
    font-size: 1rem;
    width: 100%;
    color: white;
}
.itemName {
    background: rgba(0,7,36,0.5);
    padding: 3px 0;
    text-align: center;
    font-size: 1em;
}
.itemPrice {
    font-weight: bold;
    background-color: #000724;
    padding: 2px 0;
    text-align: center;
    font-size: 0.8em;
}
.itemPrice img {
    width: 1.5em;
    padding-right: 0.3rem;
    display: block;
}

<div class='itemShopDaily'>
    <div class="itemContainer testItem">
        <div class="itemDetails">
            <div class="itemName">SAMPLE</div>
            <div class="itemPrice">
                <span>Sample</span>
            </div>
        </div>
    </div>
    <div>
        <div class="itemContainer testItem">
            <div class="itemDetails">
                <div class="itemName">SAMPLE</div>
                <div class="itemPrice">
                    <span>Sample</span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="itemContainer testItem">
            <div class="itemDetails">
                <div class="itemName">SAMPLE
                </div>
                <div class="itemPrice">
                    <span>Sample</span>
                </div>
            </div>
        </div>
    </div>
</div>