Question

我对XUL的'Box Model'布局感到非常困惑我想制作一个类似于表格的元素布局布局应包括一行三列列应具有相同的宽度并占据页面的整个宽度我将在列中放置不同的元素，但列的宽度应保持不变元素应该具有正常的尺寸，而不是伸展开来比如说，第一列是空的，第二列是图像，第三列是按钮 我怎样才能实现这一目标？
我尝试了盒子和网格，但是这些列看起来似乎是任意宽度谢谢。

这不起作用：

<grid>
<columns flex="1">
  <column/>
  <column/>
  <column/>
</columns>
<rows>
  <row>
  <spacer flex="1"/>
  <image src="MyImage.png"/>
  <button id="MyButton" label="MyButton"/>
  </row>
</rows>
</grid>

Answer 1

指定每列的最小和最大宽度，并使网格中的每个单元格具有hbox宽度特定的宽度和高度。像这样：

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
    <grid>
    <columns flex="1">
        <column maxwidth="100" minwidth="100"/>
        <column maxwidth="100" minwidth="100"/>
        <column maxwidth="100" minwidth="100"/>
    </columns>
    <rows>
        <row>
            <hbox maxwidth="100">
                xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xxxxxxxx
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="10">
                <button id="MyButton1" label="MyButton1"/>
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="30">
                <button id="MyButton1" label="MyButton2"/>
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="40">
                <button id="MyButton3" label="MyButton3"/>
            </hbox>
        </row>
    </rows>
    </grid>
</window>

在Xul中，width和length属性始终以像素为单位。您无法使用css指定百分比。这意味着您必须提前知道页面宽度，并相应地指定宽度，如果您希望列均匀分布并延伸到页面宽度。

这是另一种方式。使用此：

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
    <grid>
        <columns>
                <column flex="1"/>
                <column flex="1"/>
                <column flex="1"/>
        </columns>
        <rows>
            <row>          
                <button label="MyButton1"/>          
                <button label="MyButton2"/>           
                <button label="MyButton3"/>  
            </row>
        </rows>
    </grid>
</window>

创建这个：

按钮/列将随着窗口大小的改变而调整。

Answer 2

我建议使用flex =＆＃34; 1＆＃34;在列元素上

    <columns equalsize="always">
        <column flex="1">
        ...

a / p文档 https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize

你也可以使用equalsize =＆＃34;总是＆＃34;在行上也是如此，这是在Thunderbird Lightning日历布局中实现的方式

如何制作均匀宽度的列？

2 个答案: