html - 如何在每行 p :dataScroller 上显示两条记录

Question

我在我的 jsf 元素中使用 PrimeFaces。 p:dataScroller 组件将一条记录列为一行。我想将区域分成两列，每行列出两条记录。但是我找不到这个问题的任何文档。 Component link

Answer 1

您不能从组件中执行此操作。没有选择，例如配置columns="2"或者数据卷轴上的东西。但是当我查看生成的 html 时，我看到了一个简单的

<ul class="ui-datascroller-list">
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
</ul>

正在生成结构。所以我开始玩 css(最后，在 javascript 的帮助下，客户端总是 html 和 css)

所以我在 stackoverflow 中搜索如何显示 <ul>在两列中。关于此有几个问答，包括 HTML/CSS Making a list be in rows, 3 boxes per row? .在这种情况下，这并不能完全发挥作用，但它让我有信心让它发挥作用，我做到了。

添加:

.ui-datascroller .ui-datascroller-item {
    width: 48%;
    display: inline-block;
}

在线 PrimeFaces 展示使其发挥作用。

使用 31% 可以得到 3 列

如果您希望它“响应式”(2 或 3 或 4 或...列，具体取决于屏幕大小)，请使用

Media Queries: How to target desktop, tablet and mobile?