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元素中。当我在手机屏幕上看到这个时，我看不到七和八个按钮。以下是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移动到下一行

1 个答案: