删除 XUL menuitem 中的图像/图标空间和菜单弹出中的垂直线

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; 样式来删除这条垂直线。这可以在 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> 文本在弹出窗口中水平居中。我不认为这真的是你想要的。但是，如果这是您想要的：您可以通过 style 属性或 CSS 指示 text-align: center; 样式来使文本居中：

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

这会导致：