html - Angular2 + Kendo MultiSelect 每行列出每个元素

Question

我的应用程序中有一个 Angular2 Kendo MultiSelect 组件。我的业务要求是每行列出每个选择，而不是将它们并排堆叠。我如何实现这一目标？

我搜索并找到了这个 thread .通过将宽度设置为 100px 来实现建议的样式，但这在我的场景中不起作用，因为多选选择将超过 100px。

我发现它与我的多选一起使用的一种方法是将多选控件的宽度设置为 500px。在这种情况下，它会将每个元素放在自己的行中，但多选的大小不会占用页面的整个宽度。

如何在 Kendo Multiselect 长度设置为全宽的情况下实现每行的每个元素？

Answer 1

Multiselect 由一个 UL LI 列表组成，其中列表占据了整个宽度。所以如果你设置这个样式

.k-multiselect-wrap ul { width: 1%;}

该列表试图只占 1%，并且元素换行。这是一个丑陋的 hack，但可以做到 ;-)。它可能对不同的浏览器有副作用。

我修改了 Progress Plunker 示例:http://embed.plnkr.co/sOBzjul7e2OdI8Ig2VLE/