PrimeNG P-COL 显示在不同的线上答案

【问题标题】：PrimeNG P-COL displays on different linePrimeNG P-COL 显示在不同的线上
【发布时间】：2020-11-29 01:05:11
【问题描述】：

根据link 中提供的示例，我有一个primeng 网格和p-col 内部

我在每一行都有数据，而不是在link 中显示的同一行

我的 HTML

<h5>Basic</h5>
<div class="p-grid">
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">2</div>
    </div>
    <div class="p-col">
        <div class="box">3</div>
    </div>
</div>

我的 CSS：

   .box {
            background-color: var(--surface-e);
            text-align: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
        }

我的输出：

如何在一行中获取数据，我尝试了 display flex 和 inline，即使它们没有帮助。

【问题讨论】：

标签： css angular primeng

【解决方案1】：

问题是您添加的嵌套导致 .p-col-6 不再是 flexbox 父级 .p-grid 的子级。相反，.p-col-6 是块级元素，不会像典型的行方向 flex 子元素那样并排对齐。

<div class="p-grid">                   /* <-- flexbox  parent */
    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-6">          /* <-- NOT a flexbox child */
            6
        </div>
        …
    </div>
</div>

【讨论】：

即使有 p-col-12 他们确实并排对齐。即使尝试了上面的代码，但仍然不会并排对齐。