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

源自：3-1 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 17:54

个回答

kunkka_l: 2016-08-24 21:41:08

已采纳

<!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 可以提交表单

kunkka_l

2016-08-24 21:52:04

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

0

哈哈哈哈xxxxxx: 2016-08-24 21:42:36

<!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>