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

Question

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

我有一个居中的<menulist> ，可变宽度（ maxwidth="200" ），旁边我想在<hbox>中使用几个<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>

icons.png：

---

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

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

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

---

所以，我们的目标是总有<menulist>水平居中的页面和<hbox>与<toolbarbutton>精益到右侧<menulist> ，不管它的宽度。

这可以用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的解决方案，如果有人知道的话。

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

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）：

希望有所帮助。

Answer 2

应该有一个答案说明问题的实际解决方案，而不仅仅是在评论中。 这个答案是基于来自OndřejDoněk的.xpi信息，该信息可以在评论中下载到用户提供的答案中 。

简单的解决方案：
要使原始代码正常工作，您需要做的就是改变：

<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