html - CSS input、button由于之前元素font-size变化,上边距变化的问题
本文介绍了html - CSS input、button由于之前元素font-size变化,上边距变化的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如下html:(省略html标签和head部分)
<body>
<div id="searchContainer">
<span id="logo">logo</span>
<input id="searchBox" type="text" placeholder="请输入搜索关键词"></input>
<button id="searchNow">Go</button>
</div>
</body>
如下CSS:
<style>
#searchContainer{
height:40px;
background-color: #2a426e;
}
#searchContainer span{
color:white;
font-weight: bold;
font-size: 22px;
line-height: 40px;
height: 40px;
margin:0 15px;
}
#searchBox{
height:20px;
width:180px;
border: 1px solid #eee;
padding: 1px 2px;
margin:8px 0px;
}
#searchNow{
height:24px;
width:50px;
border: 1px solid #eee;
margin:3px 0;
}
</style>
效果:输入框和按钮距离父元素上边距距离明显大于下边距,而且调上边距还没用
当我把logo的font-size设为40时,夸张变成了这样
我该如何让输入框和按钮相对于父元素(蓝条)水平居中?这样问题的原因是什么?
解决方案
内联元素默认对其是baseline,你改变字体大小后,整体行框的baseline变了,所以对不齐
你试试给几个行内元素 vertical-align:middle 试试
这篇关于html - CSS input、button由于之前元素font-size变化,上边距变化的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文