问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行,类似如下的效果:
我的css设置如下:
.same{
padding: 0;
margin: 0;
box-sizing: border-box;
border: 0;
height: 30px;
}
.div{
width: 300px;
height: 32px;
border: solid 1px #000000;
}
.text{
width: 80%;
background-color: rgba(147, 147, 147, 0.44);
}
.btn{
width: 20%;
background-color: #59b3f3;
}
HTML代码如下所示:
<div class="same div">
<input type="text" class="same text"><button class="same btn">查询</button>
</div>
按照上面的写法能够实现上图的效果,但是请注意,input和button标签是写在一行的,如果分两行写:
<div class="same div">
<input type="text" class="same text">
<button class="same btn">查询</button>
</div>
CSS不变的话,最终效果就是如下:
在HTML中我并没有写换行符,并且样式都没有改,说明有其他东西占据了空间,经过在CSDN提问问题地址,我才发现原来inline元素其实也很复杂,需要很多需要注意的地方,现代浏览器中 inline 和 block 元素 display:inline-block 后均会产生水平空隙。 inline 元素默认就有空隙存在!它们是谁?是空白符(white space),具体内容可以看带你深入剖析inline-block属性值的前世今生这篇文章,写的十分详细。
解决办法有很多:
- 写在一行
- 在父元素div上加上 font-size:0
- 使用浮动,input标签的display:block
以上,留下问题和解决办法防止忘记。