1

我希望能够在列中正确排列标签，以便始终排列不同长度/类型的输入字段。标签始终格式化为相同的长度。

此外，如果需要，我可以省略列中的行。我通过 在 cols div 中有一个来实现这一点。

我所做的工作；然而，它“感觉”就像是一种软糖，我认为应该有更好的方法来实现这一点。

干杯。

<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 设计布局而受到了不好的评价。

但是对于像这样的表格数据，我会使用一个。
您显然可以更轻松地处理对齐问题。

于 2012-05-20T21:02:16.597 回答