0

我正在设计一个基于 div 的 html 表单，但设计没有正确对齐

如何在基于 div 的设计中正确设计复杂的表单。有没有人有使用基于 div 的设计设计的复杂表单的链接。

这是我的 html 和 css 的一部分

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="mainContainer">
    <div id="header"><div class="lblNormal">SERVICE CALL REPORT</div></div>
    <div id="callLog" >
        <div id="callLog1">  <label  class="lblNormal">SERVICE CALL LOG</label></div>
        <div id="callLog1"> <input type="text" class="textboxNormal" id="SerCallLog" name="txtSerCallLog" /></div>
    </div>
    <div id="typeVisit">
        <div id="typeVisit1"><div class="lblNormal">TYPE OF VISIT</div></div>
        <div id="typeVisit1">
            <select>
                <option value="Inspection">Inspection</option>
                <option value="Installation">Installation</option>
                <option value="Preventive">Preventive</option>
                <option value="Breakdown">Breakdown</option>
                <option value="Other">Other</option>
            </select>  
        </div>
        <div id="typeVisit1"><div class="lblNormal">TYPE OF SERVICE</div></div>
        <div id="typeVisit1">
            <select>
                <option value="WARRANTEE">WARRANTEE</option>
                <option value="EXCOMA">EXCOMA</option>
                <option value="COMA">COMA</option>
                <option value="SECOMA">SECOMA</option>
                <option value="SMA">SMA</option>
                <option value="SPUMA">SPUMA</option>
                <option value="OCS">OCS</option>
            </select>  
        </div>      
    </div>
    <div id="callRec">
        <div id="callRec1"><label  class="lblNormal">CALL RECEIVED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallRecOn" name="txtCallRecOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME(in hrs.)</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallTime" name="txtCallTime" /></div>       
        <div id="callRec1"><label  class="lblNormal">CALL ATTENDED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallAttendedOn" name="txtCallAttendedOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME IN(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeIn" name="txtTimeIn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME OUT(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOut" name="txtTimeOut" /></div>     
        <div id="callRec1"><label  class="lblNormal">TIME ON CALL(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOnCall" name="txtTimeOnCall" /></div>       
    </div>
    <div id="assoData">
        <div id="assoData1"><div class="lblNormal">ASSOCIATE DATA:NAME</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataName" name="txtAssociateDataName" /></div>
        <div id="assoData1"><div class="lblNormal">LOCATION:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataLocation" name="txtAssociateDataLocation" /></div>
        <div id="assoData1"><div class="lblNormal">TEL:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataTel" name="txtAssociateDataTel" /></div>      
    </div>
    <div id="equipData">
        <div id="equipData1"><div class="lblNormal">EQUIPMENT DATA SR.NO.:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataSrNo" name="txtEquipmentDataSrNo" /></div>
        <div id="equipData1"><div class="lblNormal">MODEL:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataModel" name="txtEquipmentDataModel" /></div>
        <div id="equipData1"><div class="lblNormal">LOAD DATA:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataLoadData" name="txtEquipmentDataLoadData" /></div>   
    </div>
    <div id="battData">
        <div id="battData1"><div class="lblNormal">BATTERY DATA:TYPE-</div></div>
        <div id="battData1">
            <select>
                <option value="SMF">SMF</option>
                <option value="WT">WT</option>              
            </select>  
        </div>
        <div id="battData1"><div class="lblNormal">MAKE:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataMake" name="txtBattaryDataMake" /></div>
        <div id="battData1"><div class="lblNormal">VOLTS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataVolts" name="txtBattaryDataVolts" /></div>  
        <div id="battData1"><div class="lblNormal">AH:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataAh" name="txtBattaryDataAh" /></div>
        <div id="battData1"><div class="lblNormal">NOS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataNOS" name="txtBattaryDataNOS" /></div>
    </div>
    <div id="battCond">
        <div id="battCond1"><div class="lblNormal">BATTERY CONDITION:CHARGING VOLTAGE:</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionChargingVoltage" name="txtBattaryConditionChargingVoltage" /></div>
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionVDC" name="txtBattaryConditionVDC" /></div>
        <div id="battCond1"><div class="lblNormal">DISCHARGE VOLTAGE(ON LOAD):</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionDiscVolt" name="txtBattaryConditionDiscVolt" /></div>  
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionOnLoadVDC" name="txtBattaryConditionOnLoadVDC" /></div>        
    </div>
    <div id="maintenance">
        <div id="preveMaintMain">
            <div id="preveMaint">
                <div id="preveMaint1">
                    <div class="lblNormal">PREVENTIVE MAINTENANCE</div>
                </div>
                <div id="preveMaint1">
                    <div><div class="lblNormal">Condition of Ventilation</div></div>
                    <div><div class="lblNormal">Condition of Nut & Bolts of Equipment</div></div>
                    <div><div class="lblNormal">Condition of Input & Output Cables</div></div>
                    <div><div class="lblNormal">Condition of FAN , METER & LED Indication</div></div>
                    <div><div class="lblNormal">Equipment cleaned with vacuum</div></div>
                </div>
                <div id="preveMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>                          
                        </select>  
                    </div>
                </div>
            </div>
            <div id="preveMaintVolt">
                <div></div>
                <div><div class="lblNormal">Input Voltage</div><input type="text" class="textboxNormal" id="InputVoltage" name="txtInputVoltage" />VAC<div class="lblNormal">Output Voltage</div><input type="text" class="textboxNormal" id="OutputVoltage" name="txtOutputVoltage" />VAC</div>
                <div><div class="lblNormal">Checked Battery Back up (In Min.)</div><input type="text" class="textboxNormal" id="CheckedBattBackup" name="txtCheckedBattBackup" /></div>
            </div>
        </div>
        <div id="batMainNFault">
            <div id="battMaint">
                <div id="battMaint1"><div class="lblNormal">BATTERY MAINTEINANCE :</div></div>
                <div id="battMaint1">
                    <div><div class="lblNormal">Condition of Nut, Bolts & Links :</div></div>
                    <div><div class="lblNormal">Terminals & Lugs OK :</div></div>
                    <div><div class="lblNormal">Filled D.M.Water :</div></div>
                    <div><div class="lblNormal">Gravity & Voltage Checked :</div></div>
                    <div><div class="lblNormal">Cleaning Done :</div></div>
                </div>
                <div id="battMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                </div>
            </div>
            <div id="faltReported">
                <div id="faltReported1"><div class="lblNormal">FAULT REPORTED</div></div>
                <div id="faltReported2"><input type="text" class="textboxNormal" id="faultReported" name="txtfaultReported" /></div>
            </div>
        </div>
    </div>
    <div id="solutions">
        <div id="solutions1"><div class="lblNormal">SOLUTION</div></div>
        <div id="solutions2">
            <textarea rows="2" cols="50"> </textarea> 
        </div>
    </div>
    <div id="remark">
        <div id="remark1"><div class="lblNormal">REMARKS</div></div>
        <div id="remark2">
            <textarea rows="2" cols="50"> </textarea> 
        </div>
    </div>
</div><!-- Main div -->

</body>
</html>

我的 CSS 的一部分

 .mainContainer
    {
        width:100%; 
        height:90%;
        background-color:gray;  
    }

    .lblNormal
    {
        font-family:Verdana, Geneva, sans-serif;
        font-size:5px;  
    }

    .textboxNormal
    {       
        width:50px;
        height:8px; 
    }
    .textboxLarge
    {   
        width:100px;
        height:8px; 
    }
    .textboxSmall
    {   
        width:25px;
        height:8px; 
    }

    #header
    {
        width:50%;
        height:10%;
        background-color:gray;
    }
    #callLog
    {
        width:40%;
        height:10%; 
        border:1px solid black;
    }
    #callLog1
    {
        width:48%;
        height:90%;
        float:left;
        display:block;  
    }

    #typeVisit
    {
        width:100%;
        height:10%;
        border:1px solid black;
    }
    #typeVisit1
    {
        width:24.5%;
        float:left;
        display:block;
        height:90%;     
    }
    #callRec
    {
        width:100%;
        height:10%; 
        border:1px solid black;
    }
    #callRec1
    {
        width:7.9%;
        height:100%;
        float:left;
        display:block;

    }

    #assoData
    {
        width:100%;
        height:10%; 
    }
    #assoData1
    {
        width:16%;
        height:100%;
        float:left;
        display:block;  
    }


    #equipData
    {
        width:100%;
        height:10%;

    }
    #equipData1
    {
        width:16%;
        height:100%;
        float:left;
        display:block;

    }
    #battData
    {
        width:100%;
        height:10%;
        background-color:red;
    }
    #battData1
    {
        width:9.9%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }

    #battCond
    {
        width:100%;
        height:10%;
        background-color:blue;
    }
    #battCond1
    {
        width:11%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #maintenance
    {
        width:100%;
        height:20%;
        background-color:black;
    }

    #preveMaintMain
    {
        width:49%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;
    }
    #preveMaint
    {
        width:100%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;
    }
    #preveMaint1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }
    #preveMaintVolt
    {   
        width:100%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;  
    }

    #batMainNFault
    {
        width:49%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }
    #battMaint
    {
        width:100%;
        height:60%; 
        background-color:yellow;
    }
    #battMaint1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #faltReported
    {
        width:100%;
        height:60%; 
        background-color:yellow;
    }
    #faltReported1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }
    #faltReported2
    {
        width:64%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #solutions
    {
        width:100%;
        height:10%;
        background-color:GREEN;
    }
    #solutions1
    {
        width:14%;
        height:100%;
        float:left;
        display:block;
        background-color:RED;
    }
    #solutions2
    {
        width:85%;
        height:100%;
        float:left;
        display:block;
        background-color:YELLOW;
    }

    #remark
    {
        width:100%;
        height:10%;
        background-color:BLUE;
    }
    #remark1
    {
        width:14%;
        height:100%;
        float:left;
        display:block;
        background-color:YELLOW;
    }
    #remark2
    {
        width:85%;
        height:100%;
        float:left;
        display:block;
        background-color:RED;
    }
4

1 回答 1

0

不确定它有什么复杂之处或您对 BUT 有什么困难，因为您说它在 IE 中看起来很糟糕，那么我将假设您没有使用 css 重置。

什么是 CSS 重置？简而言之， ”

重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。

首先检查此链接并下载其中任何一个（尽管我总是使用 Eric Meyer 的） http://www.cssreset.com/

点击“获取代码”按钮。获得后，将其插入标题中。

一旦完成，相应的样式。在最流行的浏览器上，所有浏览器都应该看起来一样（如果不是全部的话）

于 2014-01-05T03:35:47.577 回答