对所有控件进行垂直对齐控制具有相同的长度

Question

问题： 文本框的长度比组合框的长度短。因此，如果我垂直绘制它们看起来不漂亮，因为它们的右侧边缘没有对齐。所以让我们让文本框更长一些。 但我不想只是键入像素来做到这一点。我想我应该可以通过设置一些DIVS的百分比来做到这一点，但我是新手，还不知道。 所以这就是我所拥有的，而且我也将它作为一个屏幕拍摄。 所以现在我们的目标是让“Alias”文本框变得更大，这样它就会与它下面的“Ancestry”组合框对齐。

P.S：你看到的其中一些标签不是标准的HTML。他们来自ZK框架，但很好。我们仍然可以使用DIV。

<vlayout >
    <hlayout spacing = "20px">
        <vlayout id= "GeneGroup">
            <label id= "geneLabel" value = "*Gene Symbol"/>
            <bandbox id="bdGeneSearch">
            </bandbox>
        </vlayout>
        <vlayout id= "AliasGroup" >     
            <label id= "lblAlias" value = "Alias"/>
            <textbox  id = "txtAlias">
        </textbox>
        </vlayout>
    </hlayout>

    <hlayout spacing = "20px">          
        <vlayout id= "RefSeqGroup">     
            <label id= "lblRefSeq" value = "*Reference Sequence"/>      
                <combobox id = "cbRefSeq">
            </combobox>         
        </vlayout>
        <vlayout id= "AncestryGroup">       
            <label id= "lblAncestry" value = "Ancestry"/>       
                <combobox id = "cbAncestry">
            </combobox>         
        </vlayout>
    </hlayout>  
</vlayout>
</div>

Answer 1

我通过让单个hlayout包含两个vlayout然后在文本框中使用hflex =“1”来更改布局结构，以便它扩展到包含它的vlayout的整个宽度。这是代码

<zk>
<hlayout>
  <vlayout>
        <label id= "geneLabel" value = "*Gene Symbol"/>
        <bandbox id="bdGeneSearch">
        </bandbox>
        <label id= "lblRefSeq" value = "*Reference Sequence"/>      
         <combobox id = "cbRefSeq">
        </combobox>         
 </vlayout>
 <vlayout>

       <label id= "lblAlias" value = "Alias"/>
        <textbox  id = "txtAlias" hflex="1">
    </textbox>
        <label id= "lblAncestry" value = "Ancestry"/>       
            <combobox id = "cbAncestry">
        </combobox>         
</vlayout>
</hlayout>
</zk>

你可以在ZKfiddle上看到它here 您也可以使用hflex和vflex here

参考ZK关于组件灵活性的优秀文档