alignment - ZK フレームワークでの hbox/vbox 配置の問題

Question

Hbox と Vbox のレイアウトに問題があります。それらが DIV のように動作することは知っていますが、思い通りに配置することはできません。

DIV、セパレーター、パック、整列、幅、あらゆる種類の回避策を追加しようとしましたが、うまくいかないようです。

これは私のレイアウトの北側です。2 つの部分に分割したいだけです。コンポーネントの大部分を含む左側の部分は、すべて左側に配置され、若干のスペースがあります。

適切なものは、エクスポート オプションがいくつかあるだけで、すべて集中化されています。

画像を投稿したいのですが、十分な担当者がいません。

これは、私が機能させようとしているコードの一部です。

    <hbox width="100%">
        <vbox width="80%">
                <hbox>
                    <label value="${labels.processos}" />
                        <separator spacing="20px" />
                    <combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                            readonly="true">
                        <comboitem label="@load(each)" />
                    </combobox>
                        <separator spacing="20px" />
                    <a onClick="@command('editar', status=each)"
                                label="${labels.alterarvisao}"/>
                        <separator spacing="20px" />
                    <button id="novaVisao" label="${labels.novavisao}"
                        onClick="@command('novo')" />
                        <separator spacing="20px" />
                </hbox>
                    <separator height="10px" />
                    <button id="novo" label="${labels.message.novoprocesso}"
                        onClick="@command('novo')" />
                    <separator height="10px" />
                </vbox>
                    <separator spacing="100%" />
                <vbox pack="end" align="end" width="20%" >
                    <hbox >
                        <label value="${labels.common.exportar}" />
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                </vbox>
            </hbox>

とてもシンプルです。左に1つのdiv、左に配置されたテキスト、および中央に配置されたテキストを持つ別のものが右に必要です。両方とも同じ水平線上にあります。私はそれを実現することはできません。