自适应表单页面对齐方案

来源：互联网发布：机械优化设计编辑：程序博客网时间：2024/06/06 02:38

思路：一般情况，表单页的每个字段包含一个字段类型名称和一个input标签。我们利用table自适应特性，将每个字段单独包裹在一个table中。设置每个table为左浮动，将table的宽度设置想要的百分比，例如：33%；第一个td为字段名固定值，第二个td放input不设置宽度，只需将input宽度设置100%即可自适应。
效果图：
这里写图片描述
HTML代码

                <div class="input_box">                    <table width="99%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><input class="input_text" type="text" name="title"/></td>                            <td width="40"></td>                        </tr>                    </table>                    <table width="33%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><input class="input_text" type="text" name="title"/></td>                            <td width="40"></td>                        </tr>                    </table>                    <table width="33%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><input class="input_text" type="text" name="title"/></td>                            <td width="40"></td>                        </tr>                    </table>                    <table width="33%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><input class="input_text" type="text" name="title"/></td>                            <td width="40"></td>                        </tr>                    </table>                    <table width="33%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><input class="input_text" type="text" name="title"/></td>                            <td width="40"></td>                        </tr>                    </table>                    <table width="99%" class="i_common">                        <tr>                            <td width="80"><span class="input_title">标题：</span></td>                            <td><textarea class="input_textarea"></textarea></td>                            <td width="40"></td>                        </tr>                    </table>                </div>

CSS代码

.input_box{    width:90%;    margin:30px auto 40px;    overflow:hidden;}.i_common{    float:left;    height:26px;    padding-right:40px;    font-family:simsun;    font-size:12px;    margin-bottom:10px;}.input_title{    display:block;    line-height:26px;    text-align:right;}.input_text{    width:100%;    height:24px;    border:1px solid #d0def0;    line-height:24px;}.input_textarea{    width:100%;    border:1px solid #d0def0;    height:100px;}

阅读全文

0 0