1

問題: テキスト ボックスの長さがコンボ ボックスよりも短い。したがって、それらを垂直に描画すると、右側の端に整列していないため、きれいに見えません。テキストボックスをもう少し長くしましょう。しかし、私はそれを行うためにピクセルを入力したくありません。一部のDIVSでパーセンテージを設定することでこれを行うことができるはずだと思いますが、私は初心者であり、まだ理解できませんでした. これが私が持っているもので、スクリーンショットとしても添付しています。現時点での目標は、"Alias" テキスト ボックスを大きくして、その下にある "Ancestry" コンボ ボックスと正しく配置されるようにすることです。

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

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 での動作を確認できます 。また、hflex と vflex を使用したコンポーネントの柔軟性に関する ZK の優れたドキュメントを参照することもできます。

于 2011-06-23T01:56:09.227 に答える