1

问题：文本框的长度比组合框短。因此，如果我垂直绘制它们，它看起来并不漂亮，因为它们的右侧边缘没有对齐。所以让我们把文本框加长一点。但我不想只输入像素来做到这一点。我认为我应该能够通过在某些 DIVS 上设置百分比来做到这一点，但我是新手，还无法弄清楚。所以这就是我所拥有的，我也将它作为一个屏幕截图。所以现在我们的目标是让“别名”文本框变大，使其与下方的“祖先”组合框对齐。

PS：您看到的其中一些标签不是标准的 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>

在此处输入图像描述

4

1 回答 1

2

我通过使用包含两个 vlayout 的单个 hlayout 然后在文本框上使用 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 上的运行你也可以在这里 参考 ZK 关于使用 hflex 和 vflex 的组件灵活性的优秀文档

于 2011-06-23T01:56:09.227 回答