如何让 jquery 移动列表视图（或类似的）具有多列

Question

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

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

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

Listview 只允许两个按钮。

我尝试了 controlgroup，但宽按钮被分配了不同的宽度，而不是固定的宽度，使多行看起来不整洁。

网格使用固定宽度的列，因此小图标的两边 space 都很宽。

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

宽按钮将使用最大剩余宽度（不将小按钮换行），尽管硬编码宽度不太可取，接受table。

（我希望它像 table 这样第一行中每个按钮的大小应该在随后的每一行中重复）。

我的 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;
}

谁能帮帮我

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

谢谢！

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>

如何让 jquery 移动列表视图（或类似的）具有多列

How to have jquery mobile listview (or similar) with multiple columns

css

jquery

jquery-mobile

jquery-mobile-listview