元素内的子元素不会水平对齐

Question

我有一个不能溢出的包装盒。一个装有孩子的内盒。这些子项需要水平对齐，并且不允许中断到第二行。如果孩子太多，我希望内盒水平溢出，但外盒不水平溢出。我无法让孩子们不换行，因此滚动条最终变得毫无用处。子项将与 float: left 水平对齐，该行会断开并弯曲，从而挤压子项以适应。我在堆栈溢出上发现了三个具有类似问题的页面并尝试了它们，但没有一个起作用。不确定这是否会导致此内容被视为重复项而被禁止。我怀疑是元素的旋转导致了奇怪的事情发生。代码笔： https: //codepen.io/Tygari/pen/mdJQZVwCSSclass{    display: block;    height: 210px;    width: 70vw;    margin-left: auto;    margin-right: auto;    border: 1px solid black;    overflow: hidden;}info{    display: block;    height: 10%;    width: 70vw;    margin-left: auto;    margin-right: auto;    border: 1px solid black;}archetype{    display: inline-block;    height: 90%;    width: 100%;    overflow: scroll;    overflow-y: hidden;}.foo > archetype,.bar > archetype,.baz > archetype,.foobar > archetype,.foobaz > archetype,.barfoo > archetype,.barbaz > archetype{    display: none;}#foo div div div::before{    content: 'Foo';}#bar div div div::before{    content: 'Bar';}#baz div div div::before{    content: 'Baz';}#foobar div div div::before{    content: 'Foobar';}#foobaz div div div::before{    content: 'Foobaz';}#barfoo div div div::before{    content: 'Barfoo';}#barbaz div div div::before{    content: 'Barbaz';}.diamond{    height: 125px;    width: 125px;    margin-left: 60px;    text-align: center;    border: 1px solid black;    transform: translate(-30px,30px) rotate(45deg);}.diamond div{    position: relative;    border: 1px solid black;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    height: 100px;    width: 100px;}.diamond div div{    border: 1px solid black;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    height: 75px;    width: 75px;}.diamond div div div{    left: 50%;    top: 50%;    transform: translate(-50%,-50%) rotate(-45deg);    height: auto;    width: auto;    border:none;}通过添加“display: flex;”解决 原型元素和“flex-shrink: 0;” 到.钻石级。

Answer 1

通过添加“display: flex;”解决 原型元素和“flex-shrink: 0;” 到.钻石级。