弹出中的内联块列表视图答案

【问题标题】：Inline-block listview in flyout弹出中的内联块列表视图
【发布时间】：2013-09-10 20:21:34
【问题描述】：

我有这个问题：我有一个弹出窗口：

<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout" 
            aria-label="{Format text flyout}">
        <div id="flyoutList" data-win-control="WinJS.UI.ListView" 
                data-win-options="{itemDataSource : Data.flyOutData.dataSource,
            itemTemplate: select('#routeDetailsTemplate'),
            oniteminvoked: Commands.navigateListViewTrainItem,
            selectionMode: 'none',
            layout : {type: WinJS.UI.ListLayout}
            }"></div>
        <img src="../../images/logo.scale-180.png" />

    </div>

listview 和 imaget 都有 style="display: inline-block" （在 css 文件中）。现在图像出现了，但是当我设置它的显示时列表视图消失了：内联块。我试图将列表视图包装在另一个 div 中并给包装器 display: inline-block，但同样的事情发生了。知道如何实现这一目标吗？

P.S 弹出窗口有一个这样的事件列表：

flyout.addEventListener("beforeshow", function (event)
            {
                var insideFlyoutListView = element.querySelector("#flyoutList").winControl;
                insideFlyoutListView.forceLayout();
            });

【问题讨论】：

标签： listview winjs windows-store flyout

【解决方案1】：

做一些事情打开 DOM 资源管理器并尝试设置显示并检查那里的内容。

这是一个如何去 DOM Explorer 的链接

Dom Explorer VS2012

请检查列表视图元素，它将呈现为具有类 win-surface 和所有的 div。现在尝试从 DOM 资源管理器中设置高宽显示和定位

注意：用这小段代码找出你的问题，特别是设计问题是不可能的。你试一试的最好方法。如果不可能，请回复。

【讨论】：

设置列表视图的高度和宽度解决了这个问题。显然，当显示 inline-block 时，您必须设置它的大小，否则它的高度和宽度都为 0。
感谢 M 乐于帮助 :)