css - 如何排列多行/多列表格？

Question

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

此外，如果需要，我可以省略列中的行。我通过在 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;
}

Answer 1

我会使用 <table>如果可以的话。

表格旨在显示这样的表格数据。

他们(正确地)因用于进行 HTML 设计布局而名声不佳。

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