自适应表单页面对齐方案

最新推荐文章于 2023-10-02 08:19:08 发布

原创最新推荐文章于 2023-10-02 08:19:08 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#表单页面对齐

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用table的自适应特性来实现表单页面对齐的方案。通过将每个表单字段包裹在独立的table中，设置table为左浮动并设定宽度百分比，如33%，字段名固定，输入框不设宽度但设为100%，从而实现输入框自适应。这种方法能确保表单在不同屏幕尺寸下保持良好的显示效果。

思路：一般情况，表单页的每个字段包含一个字段类型名称和一个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;
}