前辈，我找照你的写法写了，但是好像没什么用啊！就最后的button表单按钮padding？？
来源：3-1 CSS 标签元素的内置padding
慕码人6229637
2016-08-24 17:54
前辈，我找照你的写法写了，但是好像没什么用啊！就最后的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>
写回答
关注
3回答
-
- 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的点击事件的
-
- 哈哈哈哈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>
CSS深入理解之padding
本css视频教程中，将深入介绍CSS中padding属性的特点，常用特性
52477 学习 · 59 问题
相似问题