html-css表单的margin-right/padding-right属性设置无效解决办法

来源：互联网发布：淘宝一淘怎么没有了编辑：程序博客网时间：2024/06/04 19:44

博主原来一开始是想实现form标签中的input元素离浏览器的右边界有一定距离的效果，但是无论我在input的css中调margin-right还是在form中调padding-right都不能实现前面说的效果，后来博主改变思路用div来包裹input在调padding还是不行，我擦。于是我在改变思路用table来包裹，然后再调padding，嘿，这下可以了。

调整失败的代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Insert title here</title>    <style>        #func{             width:100%;             padding:0px 200px 0px 0px;             text-align="center"        }        .address{            width:100%;            font-size:50px;        }        #query{            width:20%;            font-size:50px;            margin:0px auto 0px aut0;        }    </style></head><body>    <?php        function onChange(){           echo "alert('hello world')";       }    ?>    <form>        <div id="func" >            <input class="address" type="text" onclick="<?php onChange()?>" value="始发站"/>            <input class="address" type="text" onclick="<?php onChange()?>" value="终点站"/>            <input id="query" type="submit" value="查询"/>        </div>    </form></body></html>

这里写图片描述

调整成功后的代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Insert title here</title>    <style>        #func{             width:100%;             padding:0px 20px 0px 0px;             text-align="center"        }        .address{            width:100%;            font-size:50px;        }        #query{            width:20%;            font-size:50px;            margin:0px auto 0px aut0;        }    </style></head><body>    <?php        function onChange(){           echo "alert('hello world')";       }    ?>    <form>        <table id="func">            <tr>                <td>                    <input class="address" type="text" onclick="<?php onChange()?>" value="始发站"/>                </td>            </tr>            <tr>                <td>                    <input class="address" type="text" onclick="<?php onChange()?>" value="终点站"/>                </td>            </tr>            <tr>                <td>                    <input id="query" type="submit" value="查询"/>                </td>            </tr>        </table>    </form></body></html>

这里写图片描述

阅读全文

0 0