html消除button之間的間距

關於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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章