                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之padding

前辈，我找照你的写法写了，但是好像没什么用啊！就最后的button表单按钮padding？？

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding-test</title>
<style type="text/css">
label{
display: inline-block;
line-height:20px;
padding:10px;
}
#btn{
position: absolute;
left: -2000px;
}
</style>
</head>
<body>
<div>
<button id="btn"></button>
<label for="btn">按钮</label>
</div>

</body>
</html>

慕码人6229637

2016-08-24

源自：CSS深入理解之padding 3-1

关注问题我要回答

1232

操作

收起

3 回答

kunkka_l 回答被采纳 +3 积分
2016-08-24

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>padding-test</title>
   <script>
       function alertmsg()
       {
           var v = document.getElementById("hidden").value;
           alert(v);
       }

   </script>
    <style type="text/css">
        label {
            display: inline-block;
            line-height: 20px;
            padding: 10px;
        }

        #btn {
            position: absolute;
            left: -2000px;
        }
    </style>
</head>
<body>
    <div>
        <button id="btn"  onclick="alertmsg()"></button>
        <input id="hidden" type="hidden" value="1"/>
        <label for="btn">按钮</label>
    </div>

</body>
</html>

点击labelde等同于点击button 可以提交表单

1 回复有任何疑惑可以回复我~

收起回答

慕码人6229637 提问者

非常感谢！

2016-08-28 回复有任何疑惑可以回复我~

12只怕有心人

您好！视频中没有提到input,请问input是必须的吗?

2016-11-01 回复有任何疑惑可以回复我~

kunkka_l
2016-08-24

前端写到这边其实就可以了，至于表单提交之类的是程序的工作了，不要在意这些细节我写那个js只是告诉你点击label的时候是可以触发button的点击事件的

0 回复有任何疑惑可以回复我~

收起回答

哈哈哈哈xxxxxx
2016-08-24

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>padding-test</title>
   <style type="text/css">
label{
           display: inline-block;
line-height:20px;
padding:10px;
}
       #btn{
           position: absolute;
left: -2000px;
}
   </style>
</head>
<body>
<div>


<form action="/test" method="get">
<input type="text" name='user'>
<button id="btn" type="submit"></button>
   <label for="btn">按钮</label>
</form>
   
</div>

</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答