How do I tilt the xul element to the right of the centered variable element?

Question

^{<edit> I decided to clean up this question a bit to make reading easier. </edit>}

I have a centered <menulist>with variable width ( maxwidth="200"), next to which I want to pair <toolbarbuttons>in <hbox>. These elements are part of the xul element <page>.

The following image shows what my current result is and what my actual goal is:

^{A vertical red line is simply drawn to indicate the center of the window.}

The current result was achieved using the following css and 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:

---

^{You can also download this as an example of a bootable boot example:}

^{http://extensions.codifier.nl/test/downloads/ [e-mail]}

^{, 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

, :

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řej Doněk .xpi, .

:
, , :

<hbox left="200">

to

<hbox right="-66">

MDN , , XUL <stack>, right:

.

, , right="-66", , , , , : , <stack> 66 , , .

Ondřej Doněk , right, wiki .

Answer 3

CSS . XUL. : pack, orient, align, flex ...

xul- :

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