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

^{<编辑>我决定稍微澄清一下这个问题,以便阅读</编辑>}

我有一个中心 <menulist> ,宽度可变( maxwidth="200" ),我想靠在旁边 <toolbarbuttons> 在 <hbox> 。这些元素是xul的一部分 <page> 要素

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

^{垂直红线仅用于指示窗口的中心。}

当前的结果是通过以下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>

图标.png:

^{您还可以将其下载为可安装的引导测试示例:}

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

^{请注意,示例xpi安装将在安装后立即打开带有示例xul文件的新选项卡。作为一个 免责声明 :该文件可从不安全的位置(我自己的域)下载,因此请确保在安装之前验证下载的内容(即在安装之前先将xpi保存到磁盘)。}

所以,我们的目标是 <菜单列表> 水平居中于页面 <hbox> 具有 <toolbarbutton> 我们向右边倾斜 <菜单列表> ,无论其宽度如何。

使用xul和其他css是否可行?

实际上,我通过混合更多(x)html来实现它:

css:

#container {
  position: relative;
}

#container > span {
  position: absolute;
  left: 100%;
}

更改的xul/(x)html:

<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解决方案。

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