Question

^{＆lt; edit＆gt;我决定稍微清理一下这个问题，以便于阅读。＆lt; / edit＆gt;}

我有一个可变宽度（<menulist>）的居中maxwidth="200"，旁边我想在<toolbarbuttons>中使用几个<hbox>。这些元素是xul <page>元素的一部分。

下图显示了我目前的结果以及我的实际目标：

Current result and goal

^{仅绘制垂直红线以指示窗口的中心。}

目前的结果是通过以下css和xul实现的：

的CSS：

page {
  -moz-appearance: none;
  background-color: #fff;
  text-align: center;
}

toolbarbutton {
  list-style-image: url( 'chrome://codifiertest/skin/icons.png' );
}
toolbarbutton .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

toolbarbutton.add {
  -moz-image-region: rect( 0px, 16px, 16px, 0px );
}

toolbarbutton.edit {
  -moz-image-region: rect( 0px, 32px, 16px, 16px );
}

toolbarbutton.delete {
  -moz-image-region: rect( 0px, 48px, 16px, 32px );
}

toolbarbutton.config {
  -moz-image-region: rect( 0px, 64px, 16px, 48px );
}

XUL：

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://codifiertest/skin/index.css"?>

<!DOCTYPE page>

<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml">

  <div xmlns="http://www.w3.org/1999/xhtml">

    <h1>Title</h1>

    <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          pack="start"
          align="center">

      <stack maxwidth="200">
        <hbox pack="center" align="center">
          <menulist maxwidth="200">
            <menupopup>
              <menuitem label="Item" value=""/>
            </menupopup>
          </menulist>
        </hbox>
        <hbox left="200">
          <toolbarbutton class="add"/>
          <toolbarbutton class="edit"/>
          <toolbarbutton class="delete"/>
        </hbox>
      </stack>

    </vbox>

  </div>

</page>

icons.png：

The used icons

^{您也可以将其下载为可安装的自举测试示例：}

^{http://extensions.codifier.nl/test/downloads/test@extensions.codifier.nl.xpi}

^{请注意，示例xpi install将在安装后立即打开带有示例xul文件的新选项卡。并且作为免责声明：该文件可以从不安全的位置（我自己的域）下载，因此请确保在安装之前验证您下载的内容（即在安装之前首先将xpi保存到磁盘）。功能}

因此，目标是始终让<menulist>水平居中于页面，<hbox> <toolbarbutton> <menulist>向右倾斜#container { position: relative; } #container > span { position: absolute; left: 100%; }，无论如何它的宽度。

这可以用xul和一些额外的css吗？

我实际上通过混合使用更多（x）html来实现它的工作：

的CSS：

<html:div id="container"> <!-- no more xul:stack -->
  <hbox pack="center" align="center">
    <menulist maxwidth="200">
      <menupopup>
        <menuitem label="Item" value=""/>
      </menupopup>
    </menulist>
  </hbox>
  <html:span> <!-- additional span -->
    <hbox>
      <toolbarbutton class="add"/>
      <toolbarbutton class="edit"/>
      <toolbarbutton class="delete"/>
    </hbox>
  </html:span>
</html:div>

修改了xul /（x）html：

{{1}}

...但是，如果有人知道，我真的很想看到一个纯粹的xul解决方案。

提前感谢您对此进行调查。

Answer 1

我认为这应该是解决方案：

<强> page.xul

<?xml-stylesheet type="text/css" href="page.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml">
    <vbox>
        <hbox>
            <hbox>
                <menulist>
                    <menupopup>
                        <menuitem label="Item" value=""/>
                    </menupopup>
                </menulist>
            </hbox>
            <hbox>
                <button class="add"/>
                <button class="edit"/>
                <button class="delete"/>
            </hbox>
        </hbox>
        <hbox>
            <hbox>
                <menulist>
                    <menupopup>
                        <menuitem label="Item" value=""/>
                    </menupopup>
                </menulist>
            </hbox>
            <hbox>
                <button class="add"/>
                <button class="edit"/>
                <button class="delete"/>
            </hbox>
        </hbox>
    </vbox>
</page>

<强> page.css：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
page {
    -moz-appearance: none;
    background-color: #fff;
    text-align: center;
    background-image: url( 'dot.png' );
    background-position: top center;
    background-repeat: repeat-y;
}
page > vbox {
    -moz-box-flex: 1;
}
page > vbox {
    padding-left: 90px;
    -moz-box-align: center;
    -moz-box-pack: start;
}
.buttonsgroup {
    -moz-appearance: toolbox;
}
button {
    -moz-appearance: toolbarbutton;
    list-style-image: url( 'icons.png' );
    min-width: 27px !important; 
    width: 27px;
    height: 16px;
    margin: 0px 0px 0px 0px;
}
button.add {
  -moz-image-region: rect( 0px, 16px, 16px, 0px );
}
button.edit {
  -moz-image-region: rect( 0px, 32px, 16px, 16px );
}
button.delete {
  -moz-image-region: rect( 0px, 48px, 16px, 32px );
}
button.config {
  -moz-image-region: rect( 0px, 64px, 16px, 48px );
}

这是它的外观（在FF 36，Kubuntu 15.04上）：

enter image description here

希望有所帮助。

Answer 2

应该有一个答案，说明问题的实际解决方案，而不是只在评论中。这个答案是基于OndřejDoněk的.xpi的信息，该信息可以在the answer that user provided的评论中下载。

简单的解决方案：
要使原始代码有效，您需要做的就是改变：

<hbox left="200">

到

<hbox right="-66">

MDN说，对于XUL <stack>元素中的元素，属性right：

指定元素右边缘的像素位置到堆栈的右边缘。

基于使用right="-66"这样的负数的事实，我们可以推断它实际上告诉堆栈要做的是：放大使得<stack>的右边缘是它位于右侧66个像素处，并将元素的右边缘放置在堆栈的右边缘。

如果更新OndřejDoněk的答案以包含有关使用right属性的负数的信息，则可以删除此社区维基答案。

Answer 3

你的CSS看起来不错。你可以用XUL的纯属性来解决这个问题。您可以使用：pack, orient, align, flex ...

尝试使用xul-periodic-table示例：

https://github.com/alijc/xul-periodic-table/blob/master/layout.xul

如何将xul元素倾斜到可变大小的居中元素的右侧？

3 个答案: