【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

切图布局知识点(一)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7     *{
 8       border: none;
 9       outline: none;
10       margin: 0;
11       padding: 0;
12     }
13     .main{
14       width: 310px;
15       height: 50px;
16       border: 1px solid red;
17     }
18     .main input{
19       width: 140px;
20       height: 50px;
21     }
22     .main .input{
23       margin-right: 30px;
24     }
25   </style>
26 </head>
27 <body>
28   <div class="main">
29     <input type="button" value="开启" class="input" >
30     <input type="button" value="取消">
31   </div>
32 </body>
33 </html>
View Code

代码会发现两个按钮超宽自动换行,然后审查元素发现没有问题,后来请教大神才知道原来是两个按钮之前回车符造成的原因

解决方法:

方法一:在.main中加入font-size:0;

方法二:除去两个按钮代码之间的换行符

方法三:使用float直接浮动

 

posted @ 2017-07-17 17:11  happenzh  阅读(172)  评论(0编辑  收藏  举报