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

Question

我有一个不能溢出的包装盒。

一个装有孩子的内盒。

这些子项需要水平对齐，并且不允许中断到第二行。

如果孩子太多，我希望内盒水平溢出，但外盒不水平溢出。

我无法让孩子们不换行，因此滚动条最终变得毫无用处。

子项将与 float: left 水平对齐，该行会断开并弯曲，从而挤压子项以适应。

我在堆栈溢出上发现了三个具有类似问题的页面并尝试了它们，但没有一个起作用。不确定这是否会导致此内容被视为重复项而被禁止。

我怀疑是元素的旋转导致了奇怪的事情发生。

代码笔： https: //codepen.io/Tygari/pen/mdJQZVw

CSS

class{

    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;” 到.钻石级。