Firefox扩展：在menuitem中标签左对齐

Question

<menupopup>
    <menu label="label">
        <menupopup>
            <vbox flex="1">
                <menuitem>
                    <label value="test text" crop="left" />
                </menuitem>
            </vbox>
        </menupopup>
    </menu> 
</menupopup>

结果：

如何左对齐标签？

Answer 1

是否尝试取出vbox并在flex=1上设置menupopup，如果这不起作用，请将flex=1移至menuitem，如果仍然没有然后将其移至label。

Answer 2

您的问题不清楚您要完成的任务：

1. <menuitem>元素通常具有列表的左侧部分，该部分保留用于复选标记或<menuitem>的图标图像。您对<vbox>元素的使用似乎试图解决这个问题。添加class="menuitem-non-iconic"属性是执行此操作的常用方法。
2. <menupopup>列表会根据内容自动调整大小。因此，在您的代码中没有左对齐或右对齐的问题，因为弹出窗口的大小与文本相同。
除非另有说明，否则
3. <menupopup>元素通常保持对齐。
4. 使用您提供的代码无法生成您的图片。您提供的代码只有一个test text标签。你的图像显示了两个。因此，使用您提供的代码无法生成它。

假设您提供的内容的要点是您希望<menupopup>包含<menuitem>元素列表，这些元素按您的选择左对齐或右对齐，则以下内容将生成您显示的内容欲望：

<label value="Right click for popup" context="clipmenu" />
<menupopup id="clipmenu">
    <menu label="label">
        <menupopup width="300">
            <menuitem label="test text 1" crop="left" class="menuitem-non-iconic"/>
            <menuitem label="test text 2" crop="left" class="menuitem-non-iconic"/>
            <vbox flex="1">
                <menuitem>
                    <label value="test text 3" crop="left" />
                </menuitem>
                <menuitem>
                    <label value="test text 4" crop="left" />
                </menuitem>
            </vbox>
        </menupopup>
    </menu>
</menupopup>

这会产生以下结果：

注意：我在内部width="300"元素中添加了<menupopup>属性，以说明左右对齐。我还添加了一些带有class="menuitem-non-iconic"属性的<menuitem>元素，这是删除左侧空格的常用方法，而不是您使用的<vbox>。执行相同的功能。

现在，如果您希望<popupmenu>中的文字右对齐而不是默认左对齐，则可以更改该行：

        <menupopup width="300">

为：

        <menupopup width="300" align="end">

结果是：



align属性：

  

align属性指定框的子元素的方式   对齐，当盒子的大小大于总的大小时   孩子。

     

  
• 对于具有水平方向的框，它指定其子项将如何垂直对齐。
  
• 对于具有垂直方向的框，它指定其子项将如何水平对齐。
  

pack属性：

  

pack属性指定box的子元素的位置   当盒子大于孩子的大小时放置。对于盒子   水平方向，用于指示位置   孩子们横向。对于具有垂直方向的盒子，使用它   表明儿童的垂直位置。 align属性   用于指定相反方向的位置。