在 CSS 中，如何水平居中子元素，根据需要重叠它们以适应父元素的宽度而不换行？

Question

我正在尝试创建一个HTML/CSS元素，它表示一手扑克牌。

我有一个固定高度和100%宽度的父<div>容器。它包含数量可变的子<div>(卡片)，每个卡片的高度和宽度都相同。

我正在努力做到这一点：

• 将子<div>保持在一个水平行上(无换行)
• 将子<div>居中
• 只要父容器不够宽，无法并排显示，就可以根据需要水平重叠子<div>
• 保留父<div>的维度。(父框不应更改，无论它包含多少子<div>)

这可能吗？

我试过这样的东西，但没有运气：

.parent {
height: 110px;
text-align: center;
white-space: nowrap;
width: 100%;
}
.child {
border: 1px gray solid;
display: inline-block;
height: 100px;
width: 80px;
}

<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
...
</div>

^只要父容器足够宽，可以并排放置所有子容器<div>，这就做得很好。但是，当父对象没有那么宽时，子对象<div>不会彼此重叠。相反，孩子们超越了父母的界限。(今天的孩子们，朋友？)

我还尝试过"浮动"子div并使用margin-left:calc(20%-100px)，但这不起作用，原因有两个：浮动元素可以换行，并且margin-lift值需要根据有多少子元素而不同(这可能会改变)。

Answer 1

如果你想坚持只使用CSS的解决方案，你可以试试flexbox。下面，我将display: flex应用于.parent，这允许.child节点在.parent内弯曲，迫使它们具有相等的宽度。在每个子元素中，我将position: absolute添加到一个伪元素中(使用真实元素也可以很容易地完成)，以充当实际内容。在您的情况下，显示卡片。

* {
box-sizing: border-box;
}
.parent {
display: flex;
height: 110px;
align-items: center;
justify-content: center;
white-space: nowrap;
width: calc(100% - 96px);
padding: 48px;
}
.child {
position: relative;
height: 100px;
width: 80px;
}
.child:hover:after {
z-index: 1;
}
.child:after {
content: "A♠";
position: absolute;
border: 4px solid red;
background: white;
display: inline-block;
height: 100px;
width: 80px;
left: 0; 
top: 0;
border-radius: 8px;
z-index: 0;
}

<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>