删除menupopup中XUL menuitem和vertcal行中的图像/图标空间

Question

我有一个menupopup ，当在Firefox 6.0.2的Windows 7上使用时，在左边显示了一些空格。 但是当与Firefox 4和Windows XP一起使用时，左侧不显示空间。 如何删除左侧的空格？

<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">              
    <menupopup>
        <menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
        <menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
        <menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
        <menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
    </menupopup>
</toolbarbutton>

menuitem应位于弹出窗口的中心。 此外，在显示的label之前有一条细线（请查看上面的屏幕截图）。 我想删除该行。

Answer 1

<?xml version="1.0"?>
        <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
        <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        <row>
        <toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">             
                <menupopup id="editItems" position="after_pointer">
                    <menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
                    <menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
                    <menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
                    <menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
                  </menupopup>
        </toolbarbutton>
        </row>
        </window>

根据文档，您不能在中心位置，但我会在一行中使用工具栏按钮，然后使用任何一个定位属性。

https://developer.mozilla.org/en/XUL/PopupGuide/Positioning https://developer.mozilla.org/en/XUL/menupopup https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

有关详细信息，请参阅这些链接。

Answer 2

默认情况下， <menuitem>元素将显示<menupopup>左侧的图标空间：

您可以通过向每个元素添加class="menuitem-non-iconic"来显示<menuitem>元素，而不显示图标空间：

但是，如果仔细观察，菜单下方会有一条垂直线。 您可以通过将<menupopup>元素更改为样式-moz-appearance: none;来删除此垂直线-moz-appearance: none; 。 这可以在CSS文件中完成，也可以作为style属性， style="-moz-appearance: none;" ，关于元素：

将这些基本代码放在一起看起来像：

<toolbarbutton id="search" type="menu" label="SEARCH">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" label="Web"/>
        <menuitem class="menuitem-non-iconic" label="Images"/>
        <menuitem class="menuitem-non-iconic" label="News"/>
        <menuitem class="menuitem-non-iconic" label="Video"/>
    </menupopup>
</toolbarbutton>

使用完整的代码：

<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
        <menuitem class="menuitem-non-iconic" label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
        <menuitem class="menuitem-non-iconic" label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
        <menuitem class="menuitem-non-iconic" label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
    </menupopup>
</toolbarbutton>

使文本居中：
您最后一句“ menuitem应位于弹出窗口中心”的一种解释是，您希望<menuitem>文本在弹出窗口中水平居中。 我认为这不是你想要的。 但是，如果它是你想要的：你可以通过指示text-align: center;使text-align: center; 样式通过style属性或CSS：

<toolbarbutton id="search" type="menu" label="SEARCH">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Web"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Images"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="News"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Video"/>
    </menupopup>
</toolbarbutton>

这导致：