Question

我正在尝试使用xul来创建这样的布局：

有一个包含数据树的框

在前一个框的正下方有一个包含一些按钮的框。

我决定使用，否则第二个框将紧挨着第一个框（除非我使用vbox）。问题是无论我赋予flex什么值，盒子都不会像我想的那样完全拉伸。它只占用左角的一小块空间，而不是整个窗口。有人可以帮帮我吗？

我的代码如下：

    <!-- there're 2 rows, 1 for data, 1 for toolbar -->
    <rows>
        <!-- row 1 is for a tree of data -->
        <row flex="1">
            <vbox flex="1">
                <tree id="MyTree" flex="1" height="1" width="1">
                    <treecols>
                        <treecol flex="1" label="Column1"/>
                        <treecol flex="1" label="Column2"/>                                
                    </treecols>
                    <treehead>
                        <treerow>
                            <treecell label="Name"/>
                            <treecell label="Address"/>                                   
                        </treerow>
                    </treehead>
                    <treechildren flex="1">
                        <treeitem container="true" open="true">
                            <treerow>
                                <treecell class="treecell-indent" label="Group 1"/>
                            </treerow>
                            <treechildren>
                                <treeitem>
                                    <treerow>
                                        <treecell class="treecell-indent" label="Item 1"/>
                                        <treecell label="xyz"/>
                                        <treecell label="adfjakdhk"/>
                                    </treerow>
                                </treeitem>
                            </treechildren>
                        </treeitem>                                                     
                    </treechildren>
                </tree>
            </vbox>
        </row>
        <!-- row 2 is for tool bar-->
        <row>
            <!--buttons are here-->
        </row>
    </rows>
</grid>

Answer 1

从窗口中删除align属性，并将flex =“1”添加到列中。

Answer 2

我的代码在开头时缩短了。这是它的开始部分。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<window align="left" class="dialog" flex="1" xmlns:html="http://www.w3.org/TR/REC-html40"     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<groupbox flex="1">
    <caption label="List of something"/>
    <grid flex="1">
        <!-- I need only 1 column -->
        <columns>
            <column/>
        </columns>

在XUL框中使用网格布置框不占用整个空间

2 个答案: