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

Question

^{我决定稍微整理一下这个问题，以便于阅读。}

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

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

^{竖红线只是用来表示window的中心。}

目前的结果是通过以下 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 安装将在安装后立即打开一个包含示例 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

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

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

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

Answer 2

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

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 3

应该有一个答案来说明问题的实际解决方案，而不仅仅是在评论中。此答案基于来自 Ondřej Doněk 的 .xpi 的信息，该信息在 .

的评论中被放置为可下载

简单的解决方法：
要使原始代码正常工作，您只需更改：

<hbox left="200">

到

<hbox right="-66">

MDN 表示对于紧邻 XUL <stack> elements, the attribute right:

的元素

specifies the pixel position of the right edge of the element relative to the right edge of the stack.

基于使用负数如 right="-66" 的事实，我们可以推断出它实际上告诉堆栈要做的是：放大使得 [=13= 的右边缘] 位于其原位置右侧 66 像素处，并将其右边缘放置在堆栈右边缘的元素。

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

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

How do I lean a xul element to the right side of a variably sized centered element?

css

firefox

xul

firefox-addon