html消除button之间的间距

最新推荐文章于 2024-07-19 22:27:36 发布

doudou_demo

最新推荐文章于 2024-07-19 22:27:36 发布

阅读量1.6w

点赞数

分类专栏： html+css 文章标签： html button css

本文链接：https://blog.csdn.net/doudou_demo/article/details/47777131

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于html中input标签中button属性和button标签的奇怪现象，有助于解决消除button之间的默认间距，代码如下，复制即用，谢谢！
（其实直接用margin属性就可以消除间距）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮之间的距离</title>
<style type="text/css">
*{padding:0;margin:0;border:none;text-decoration:none;}/*删除浏览器中带有的默认格式*/
#test{width:200px;height:400px;margin:0 auto;border:#093 solid 1px;}
#test button{width:50px;height:30px;background-color:#093;}
#test input{width:50px;height:30px;background-color:#963;border:#000 solid 1px;}
#test .te5{width:50px;height:30px;background-color:#963;border:#000 solid 1px;}
#test .te6{width:50px;height:30px;background-color:#963;border:#000 solid 1px;margin-left:-8px;/*input设置margin的位置*/}
</style>
</head>
<body>
<div id="test">
<p style="font-size:14px; color:#096">button标签</p>
<p>1、不换行</p>
<button type="button" class="btn1">test1</button><button type="button" class="btn2">test2</button><br />
<p>2、换行</p>
<button type="button" class="btn1">test1</button><!--此处换行--->
<button type="button" class="btn2">test2</button><br /><br /><br />
<p style="font-size:14px; color:#096">input标签</p>
<p>1、不换行</p>
<input type="button" value="test3" /><input type="button" value="test4" /><br />
<p>2、换行</p>
<input type="button" value="test3" /><!--此处换行--->
<input type="button" value="test4" /><br />
<p>3、margin解决间距</p>
<input type="button" value="test5" class="te5"/><!--此处换行--->
<input type="button" value="test6" class="te6"/><br />
</div>
</body>
</html>