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

Question

我很惊讶这个问题没有被更频繁地问到......我在尝试了一个小时后创建了这个问题 - 然后在创建问题 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;
}

谁能帮帮我

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

谢谢！

Answer 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>