css+div佈局案例

<div class="joinus-info">
        <div class="form-title">填寫表格</div>
        <form action="{sh::U(`Index/joinus`)}" class="smart-green"  onsubmit="return checkform();" method="post" id="myform">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="addTable">
            <tr>
                <td height="48" align="right"><strong>姓名：</strong></td>
                <td colspan="3" class="lt"><input type="text" name="name" id="name" class="" size="45" value=""/></td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>手機：</strong></td>
                <td colspan="3" class="lt"><input type="text" name="phone" id="phone" class="" size="45" onkeyup="value=value.replace(/[^d]/g,``)" value=""/></td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>行業：</strong></td>
                <td colspan="3" class="lt">
                <select name="business" id="business">
                    <option value="">-請選擇-</option>
                    <option value="LS">零售</option>
                    <option value="CY">餐飲</option>
                    <option value="QT">其他</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>地址：</strong></td>
                <td colspan="3" class="lt">
                    <div id=`s_city`>
                        <select name="province" class="prov set_disabled"></select>
                        <select name="city" class="city " disabled="disabled"></select>
                        <select name="district" class="dist " disabled="disabled"></select>
                    </div>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>詳細地址：</strong></td>
                <td colspan="3" class="lt">
                    <input type="text" name="address" id="address" class="address" value=""/>
                </td>
            </tr>

            <tr>
                <td height="48" align="right"><strong>選擇代理商：</strong></td>
                <td colspan="3" class="lt" style="width: 80%;">
                    <volist name="agentData" id="vo" mod="3" key="k" empty="暫時沒有資料">
                    <div style="display:inline-block;width:280px;margin:3px;">
                    <input type="radio" class="regular-radio" value="{sh:$vo.agent_id}" name="agent_id" id="agent_{sh:$k}" <eq name="k" value="1">checked="checked"</eq>><label for="agent_{sh:$k}"></label><span style="display:inline-block;padding:0px 0px 5px 5px;">{sh:$vo.name} 電話({sh:$vo.tel})</span>
                    </div>
                    <eq name="mod" value="2"><br/></eq>
                    </volist>
                </td>
            </tr>
            <tr>
                <td height="48" align="right"><strong>備註：</strong></td>
                <td colspan="3" class="lt"><textarea name="remarks" class="" placeholder="請輸入備註資訊..." style="width:300px;height:80px;"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td class="lt">
                <notempty  name="agentData"><input type="submit" name="submit" value="提交" class="button btn-success"/></notempty >
                </td>
            </tr>
        </table>
    </form>
    </div>

.joinus-info{margin: 0 auto;width:100%;text-align: left;font-size: 16px;background-color:#EFEFEF;}
.joinus-info table{
    margin-left:10%;
}
.joinus-info .form-title{
    font-size: 20px;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color:#FB780F;
}

.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
color: #555;
height: 40px;
line-height:15px;
width: 40%;
padding: 0px 0px 0px 10px;
margin-top: 2px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green input[type="text"].address{width: 60%;} /*這裡面存在一個執行順序的問題class先執行，class下面的input後執行*/
.smart-green textarea{
height:100px;
padding-top: 10px;
}

.smart-green select{
    width: 15%;
}

.smart-green input[type="radio"]{
    margin-top: 10px;
}


.smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}