Удалите пространство изображения / иконки в меню XUL и вертикальную строку в menupopup

Question

У меня есть menupopup, который при использовании в Windows 7 в Firefox 6.0.2 показывает некоторое пространство слева.Но при использовании с 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>:

">

Вы можете отобразить элементы <menuitem> без пробелов, добавив class="menuitem-non-iconic" к каждому элементу:

without space for icons, but with vertical line">

Однако, если вы посмотрите внимательно, в меню есть вертикальная линия. Вы можете удалить эту вертикальную линию, изменив элемент <menupopup> на стиль -moz-appearance: none;. Это можно сделать либо в файле CSS, либо в виде атрибута style, style="-moz-appearance: none;", для элемента:

without space for icons, but without vertical line">

Соединяя их вместе, базовый код выглядит так:

<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; либо с помощью атрибута 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>

В результате: