如何让jquery mobile listview（或类似的）具有多列

Posted 2023-05-09

【中文标题】如何让jquery mobile listview（或类似的）具有多列

【英文标题】：How to have jquery mobile listview (or similar) with multiple columns

【发布时间】：2016-07-29 12:42:30

【问题描述】：

我很惊讶这个问题没有被更频繁地问到......我在尝试了一个小时后创建了这个问题 - 然后在创建问题 11 分钟后，我想出了一个可以改进的可行答案......

我想要一个列表，每行有两个小按钮，一个宽按钮，后跟两个按钮。

[small][small][-----wide button-----][small][small]
[small][small][-----wide button-----][small][small]
[small][small][-----wide button-----][small][small]

Listview 只允许两个按钮。

我尝试了控制组，但宽按钮被分配了一个不同的，而不是固定的宽度，这使得多行看起来不整洁。

网格使用固定宽度的列，因此小图标两边都有宽阔的空间。

小按钮是一个带有图标没有文字的 jquery 移动按钮。

宽按钮将使用最大剩余宽度（不会将小按钮换行），但硬编码宽度不太可取，是可以接受的。

（我希望它像一个表格，因此第一行中每个按钮的大小应该在随后的每一行中重复）。

我的 CSS 不是很好，但我最近的尝试是玩控制组，看看我是否可以更改宽按钮的宽度。

HTML5

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" id="abc" class="ui-btn ui-icon-delete ui-btn-icon-left width300">Left</a>
    <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" id="abc" class="ui-btn ui-icon-delete ui-btn-icon-left width300">Left</a>
    <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
</div>

CSS

.width300 
    width: 300px;

谁能帮帮我

消除每行之间的间隙？ 圆角第一行和最后一行？

谢谢！

【问题讨论】：

我会使用flex-box;但旧浏览器不支持。

我从 jquery 论坛认出了你，你在那里给了我很大的帮助 - 谢谢。 Flex-box 是一个插件，我想避免依赖插件

它不是一个插件，它是一个 CSS 布局。 jsfiddle.net/Palestinian/232gf2g2

再次感谢 - 我会玩它的。

您也可以只使用带有一些简单 CSS 的 html 表格来消除间隙并圆角第一行和最后一行：jsfiddle.net/ezanker/9jug4ogs

【参考方案1】：

Omar 和 ezanker 都提供了上述可行的答案。

CSS：

.flex-container 
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    

.flex-item:nth-child(1) 
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    

.flex-item:nth-child(2) 
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    

.flex-item:nth-child(3) 
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    

.flex-item:nth-child(4) 
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    

.flex-item:nth-child(5) 
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    

HTML

<div class="ui-content">
  <div class="flex-container flex-container-style fixed-height">
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">1</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">2</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">3</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">4</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">5</a></span></div>
  </div>
</div>