问题描述:
input框和后边的按钮不能对齐
如下图所示:
采用的布局是
<div class="header">
<div class="header-text">全息画像查询系统</div>
<div class="header-search">
<div class="input-box">
<input class="search-input" type="text" placeholder="请输企业名称/法定代表人等关键词" />
</div>
<div class="search-btn">搜索</div>
</div>
</div>
样式
.header-search {
height: 40px;
width: 34%;
line-height: 40px;
/* background-color: #f2f8fc; */
border: solid 1px #d4e2f5;
box-sizing: border-box;
float: right;
margin-top: -60px;
margin-right: 20px
}
.input-box {
height: 100%;
width: calc(100% - 90px);
box-sizing: border-box;
float: left;
}
.search-input {
height: 100%;
width: 100%;
border: 0;
padding-left: 30px;
box-sizing: border-box;
font-size: 14px;
color: #000;
background-color: #f2f8fc;
background-image: url('../img/serch.png');
background-repeat: no-repeat;
background-position: 10px 13px;;
}
.search-btn {
width: 90px;
height: 100%;
text-align: center;
float: right;
cursor: pointer;
color: #fff;
background-color: #5c9df1;
}
解决办法:
将input标签转化为块级元素即可
具体操作:
为.search-input添加display: block;
解析原因:
input为行内元素,设置的padding:0;不会起作用,而后边的div为块级元素故二者不可能对齐