如何将 Kendo Mobile Buttongroup 动态移动到下一行

Question

我有一个要求，我必须在一行中专门显示三个按钮组，如果它有更多按钮，那么它应该移到下一行。这些应该动态发生，因为数据值将来自服务器。

这是示例Kendo Mobile 的 ButtonGroup 代码

<ul data-role="listview" data-type="group">
            <li>
                Default ButtonGroup
                <ul>
                    <li>
                        <ul data-role="buttongroup" data-index="0">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                            <li>Five</li>
                            <li>Six</li>
                            <li>Seven</li>
                            <li>Eight</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

这里每个按钮都添加到 li 元素。当我在手机屏幕上看到这个时，我看不到七和八按钮。下面是它的屏幕截图 link http://i.stack.imgur.com/QBmeI.png

因此我想要的是限制一行只有 3 个按钮，并且以下元素必须落在下一行（接下来的三个按钮）并且它应该以类似的方式继续。

Answer 1

您需要将 UL 上的显示属性从 display:table 更改为 display:inline-block。然后在 UL.LI 上，您需要将它们的显示从 display:table-cell 更改为 display:inline-block，将它们设置为 float:left 和 width: 33%。

#ulId {
   display: inline-block !important;
   width: 100%;
}
#ulId li {
  display: inline-block;
  float: left;
  width: 33%;
}

不管屏幕的宽度如何，这应该让您有 3 个按钮的宽度，并在需要时换行到下一行。

查看示例 Kendo Dojo

如何将 Kendo Mobile Buttongroup 动态移动到下一行

How to move Kendo Mobile Buttongroup to next row dynamically

html

telerik

jquery-mobile

kendo-ui

kendo-mobile