Question

我很惊讶这不是经常被问到的......我在经过一个小时的尝试后创造了这个问题 - 然后在创建问题后的11分钟，我想出了一个可以改进的可行答案... < / p>

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

[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;
}

有人可以帮助我

删除每行之间的间隙？
围绕第一排和最后一排的角落？

谢谢！

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移动列表视图（或类似）

1 个答案: