换行XUL元素

Question

请考虑以下几点：

<groupbox id="keyboard" orient="horizontal">
        <button id="a" label="a" class="thinbutton"/>
        <button id="b" label="b" class="thinbutton"/>
        <button id="c" label="c" class="thinbutton"/>
</groupbox>

它是Firefox扩展中对话框的一部分。我有一些javascript将不同数量的按钮附加到groupbox元素中(上面的按钮或多或少只是说明性的)。通常大约有40-80个按钮。然而，它们超出了窗口的边缘，到达它们的唯一方法是调整窗口的大小。我希望它们在末尾换行，就像文本元素中的文本一样。我在这里看到了另一个看起来与此相关的问题，解决方案是将按钮包装在<description>标记中，但这似乎对我不起作用。

用来包装XUL元素的正确的CSS或XUL属性是什么？

Answer 1

这里的方法是将按钮包装在<description>元素中-但您应该记住添加一个flex="1"属性( <description>元素需要跨越<groupbox>元素的整个宽度，而不是延伸到其内容。这对我来说很有效：

<groupbox id="keyboard" orient="horizontal">
  <description flex="1">
    <button id="a" label="a" class="thinbutton"/>
    <button id="b" label="b" class="thinbutton"/>
    <button id="c" label="c" class="thinbutton"/>
    ...
  </description>
</groupbox>