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

标签: css 表单
947人阅读 评论(0) 收藏 举报
分类:

博主原来一开始是想实现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>

这里写图片描述

查看评论

setPadding()无效的原因分析

在ListView中经常使用view.setPadding(left, top, right, bottom)来实现下拉和上拉的效果(view代表headerView或footerView),主要设置...
  • a10615
  • a10615
  • 2016-05-17 13:31:16
  • 5759

一个关于css中margin-right没有效果的问题

转载自:http://www.jb51.net/css/173943.html
  • u010970531
  • u010970531
  • 2014-11-05 13:42:17
  • 3353

HTML中margin、padding和border的区别

前端页面是需要给用户展示信息的,是离不开布局的,但是各个标签也不会挤在一起,有的标签距离很远有的很近,有的还有边框,这就需要调试出来了,其中margin、padding和border就是HTML中最常...
  • Coco__D
  • Coco__D
  • 2016-11-25 15:06:44
  • 4484

html盒模型margin、padding、border使用

盒模型是在html中非常重要的基础知识,这里主要说一下margin,padding、border使用时会遇到的一些需要注意的情况...
  • Victor_Wei_H5
  • Victor_Wei_H5
  • 2016-09-04 16:10:37
  • 1676

对table,td设置padding,margin的问题

table有margin,padding,td有padding无margin。 (有无即可设置与否的问题)解决方法: 1.用border表达相同效果。 2.td内嵌p标签等,设置内嵌的标签 3...
  • Spotlight_mar
  • Spotlight_mar
  • 2016-12-01 16:12:31
  • 5654

html5中不再支持table的cellspacing和cellpadding属性

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个...
  • sinolzeng
  • sinolzeng
  • 2014-10-21 10:37:29
  • 8908

table中cellspacing和cellspadding的用法

cellspacing:设置单元格之间的距离 cellspacing=6的时候   ……   cellspacing=1的时候   cellspacing=0的时候 ...
  • neilro
  • neilro
  • 2018-01-15 22:56:22
  • 94

微信小程序css篇----外边距(margin)和内边距(padding)

说到边距,那这个基本上跟android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) 一.margin:外边距;设置对象四边的外延边距。 margin: 20rpx 10r...
  • qq_32067045
  • qq_32067045
  • 2016-12-29 23:16:05
  • 13767

html中元素的padding属性与margin属性

padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin...
  • nyist327
  • nyist327
  • 2016-01-07 09:39:50
  • 650

right与margin-right无效,如何使其有效

right与margin-right无效,如何使其有效 right有效必须使用position:absolute;right:10 margin-right无效,因为默认是左上对齐,可以使用浮动:...
  • qq_32766999
  • qq_32766999
  • 2018-01-10 15:48:27
  • 147
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 1165
    排名: 4万+
    最新评论