【发布时间】：2015-03-28 20:24:23
【问题描述】：
我有一个居中的<menulist>，宽度可变（maxwidth="200"），我想在<hbox> 旁边靠几个<toolbarbuttons>。这些元素是 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 安装将在安装后立即打开一个带有示例 xul 文件的新选项卡。作为免责声明：该文件可从不安全的位置（我自己的域）下载，因此请确保在安装之前验证您下载的内容（即在安装之前先将 xpi 保存到磁盘）。
因此，目标是始终让<menulist> 水平居中于页面，而<hbox> 和<toolbarbutton>s 靠在<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 解决方案，如果有人知道的话。
提前感谢您对此进行调查。
【问题讨论】：
-
@WebDev 它确实有效！ :-) 不过，如果有人知道的话，我仍然愿意看到一个纯粹的 xul 解决方案。
-
很高兴听到我能帮上忙。如果有 xul 解决方案，我也很想知道。我会留意的。
-
我在 XUL Explorer 和在 Firefox 的选项卡中打开的独立 XUL 文件中都尝试了您的原始代码。在这两种情况下，它都没有像您的图像中描绘的那样呈现。如果您可以提供您正在使用的相关 CSS 代码，这将很有帮助，这样我们就可以有一个已知的工作起点，而不必首先修改您提供的代码以使其显示接近您的图像显示当前代码显示。请参阅How to create a Minimal, Complete, and Verifiable example。
-
顺便说一句：如果
<menulist>变得太大，在<stack>和<menulist>上使用maxwidth="200"应该会导致按钮没有可用空间。但是，<stack>上的maxwidth="200"似乎没有被遵守。如果您真的希望<stack>的宽度限制为 200，则需要将<menulist>上的maxwidth定义为所需的最大宽度减去您为<toolbarbutton>的<hox>确定的宽度（以及此类和<menulist>之间的任何空格。 -
基于来自 Ondřej Doněk 的 xpi 的信息：要使原始代码正常工作，您所要做的就是将：
<hbox left="200">更改为<hbox right="-66">。如果他更新他的答案，我将删除此评论，因为信息确实来自他，但不在他的答案中。
标签： css firefox firefox-addon xul