1

さまざまな長さ/タイプの入力フィールドが常に整列するように、ラベルを列に正しく整列できるようにしたいと考えています。ラベルは常に同じ長さにフォーマットされます。

また、必要に応じて列の行を省略できるようにすることもできます。 cols div内にa を持つことでこれを達成しました。

私がやったことはうまくいきます。しかし、それはファッジのように「感じ」ます。これを達成するためのより良い方法があるはずです。

乾杯。

<div id="divAddInputFields">
    <fieldset id="fsAddInputFields" class="inputFieldSet">
        <div id="divFsAddCol1">
            <div id="divFsAddCol1Row1">
                <label id="lblGenCode" for="wsGenCode">Gen Code</label><input type="text" class="String02" name="wsGenCode" id="wsGenCode" />
            </div>
            <div id="divFsAddCol1Row2">
                <label id="lblRelNote" for="wsRelNote">Rel Note</label><input type="text" class="String12" name="wsRelNote" id="wsRelNote" />
            </div>
            <div id="divFsAddCol1Row3">
                <label id="lblQuantity" for="wsQuantity">Quantity</label><input type="text" class="Number7_0" name="wsQuantity" id="wsQuantity" />
            </div>
        </div>
            <div id="divFsAddCol1Row1">
                &nbsp;
            </div>
        <div id="divFsAddCol2">
            <div id="divFsAddCol2Row1">
                <label id="lblCofC" for="wsCofC">C of C</label><input type="text" class="String12" name="wsCofC" id="wsCofC" />
            </div>
            <div id="divFsAddCol2Row2">
                <label id="lblComp" for="wsComp">Comp</label><input type="checkbox" class="checkbox1" name="wsComp" id="wsComp" />
            </div>
        </div>
    </fieldset>
</div>

ページ固有の css (外部ファイル内.....)。

#divAddInputFields  {width:460px;       margin:0px 0px 0px 0px; height:160px; overflow:auto;    float:left; }
#divFsAddCol1       {width:220px;       margin:0px 0px 0px 0px; height:140px; overflow:auto;    float:left; }
#divFsAddCol2       {width:220px;       margin:0px 0px 0px 0px; height:140px; overflow:auto;    float:left; }

ライブラリからのCSS

.inputFieldSet 
{   padding:0px 0px 0px 0px;    
    border:none;}

.label, .inputFieldSet label {
    height:15px;
    width:80px; 
    display: inline-block;
    border:1px solid black; 
    padding:1px 2px 1px 2px;    
    background-color:#66cdaa;   
    vertical-align:top; 
    text-align:left;
    margin:0px 1px 1px 3px;
    font-size:10px;
}

.inputFieldSet input {
    height:15px;
    padding:1px 2px 1px 2px;    
    border:1px solid grey;  
    vertical-align:top;
    position: relative;
    /*overflow: hidden;*/
    margin:0px 0px 1px 0px;
}

.inputFieldSet input[type="submit"] {
    padding:1px 2px 1px 2px;    
    vertical-align:top;
    height:20px;
    position: relative;
    /*overflow: hidden;*/
    margin:0px 0px 1px 0px;
}

.inputFieldSet input[type="checkbox"]  {
    padding:1px 2px 1px 2px;    
    vertical-align: top;
    margin: 0px 0px 0px 0px;
}

.inputFieldSet select {
    padding:1px 0px 1px 2px;    
    vertical-align: top;
    position: relative;
    /*overflow: hidden;*/
    margin:0px 0px 1px 0px;
}
4

1 に答える 1

1

<table>できれば、これにを使用します。

表は、このような表形式のデータを表示することを目的としています。

彼らは（正しく）HTMLデザインのレイアウトを行うために使用されたために悪いラップを得ました。

しかし、このような表形式のデータには、1つを使用します。
明らかに、位置合わせの問題をはるかに簡単に処理できるようになります。

于 2012-05-20T21:02:16.597 に答える