HBOX / VBOX对齐问题在ZK框架中
题
我正在使用hbox和vbox布局的一些问题。 我知道他们表现得很喜欢divs,但我无法以我想要的方式对抗它们。
我试图加入divs,sectepator,pack,对齐,宽度,每种解决方法,但似乎不能使它工作。
这是我的布局的北方,我只想要它有两块: 左侧,它包含组件的大部分,它一切都与左侧对齐一些间隔
和正确的,它只有一些导出选项,它都是集中的。
我发布了一个图像,但我没有得到代表。
这里是我尝试工作的代码的一部分:
<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>
.
这很简单。 我需要一个div到左边,文字对齐到左边是 还有另一个到右侧,带有集中文本。 两者都在Sime水平的木质上。 我只是不能让它发生。
解决方案
是你想要的吗?
<hbox hflex="1" spacing="20" width="100%" widths="80%,20%">
<vbox align="center" pack="start" spacing="20">
<hbox spacing="5px">
<label value="${labels.processos}" />
<combobox id="cmbNovo" model="@load(vm.loadCombobox)"
readonly="true">
<comboitem label="@load(each)" />
</combobox>
<a onClick="@command('editar', status=each)"
label="${labels.alterarvisao}"/>
<button id="novaVisao" label="${labels.novavisao}"
onClick="@command('novo')" />
</hbox>
<cell/>
<cell>
<button id="novo" label="${labels.message.novoprocesso}"
onClick="@command('novo')" />
</cell>
</vbox>
<vbox pack="center" align="center" vflex="1" spacing="20" >
<cell>
<label value="${labels.common.exportar}" />
</cell>
<cell>
<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}"/>
</cell>
<cell>
<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}"/>
</cell>
</vbox>
</hbox>
. 其他提示
好的,解决了我的布局问题。
我是一个java程序员,而不是一个web设计师,所以可能应该有更好的解决方案,但这是我所做的:
<borderlayout>
<west width="80%" style="border:none">
<vbox>
<separator height="20px" />
<hbox>
<label value="${labels.processos}" />
<separator orient="vertical" spacing="50px" />
<combobox id="cmbNovo"
model="@load(vm.loadCombobox)" readonly="true">
<comboitem label="@load(each)" />
</combobox>
<separator orient="vertical" spacing="50px" />
<a onClick="@command('editar', status=each)"
label="${labels.alterarvisao}" />
<separator orient="vertical" spacing="50px" />
<button id="novaVisao"
label="${labels.novavisao}" onClick="@command('novo')" />
</hbox>
<separator height="10px" />
<button id="novo"
label="${labels.message.novoprocesso}"
onClick="@command('novo')" />
</vbox>
</west>
<east width="20%" style="border:none; align:center;">
<tablelayout columns="5">
<tablechildren colspan="5"
style="text-align:center">
<label value="${labels.common.exportar}" />
</tablechildren>
<tablechildren colspan="3">
<label
value="${labels.export.todasaspaginas}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}" />
</tablechildren>
<tablechildren colspan="3">
<label value="${labels.export.estapagina}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}" />
</tablechildren>
</tablelayout>
</east>
</borderlayout>
.
我必须筑巢我的第一个边界范围 这有点太多了,但对我来说很好。
不隶属于 StackOverflow