实现样式
简述:书写移动端头部样式的时候,可以将头部包裹在一个大盒子里面。
不要给大盒子设置padding。给左右盒子分别设置,左边的盒子设置宽度,左右的padding。右边的盒子设置宽高,如果是占满剩余盒子的话,可以设置为flex:1。用大盒子的高度,减去右边盒子的高度除以2就是margin,设置margin把盒子挤到中间。中间的文本可以设置line-height让他们处于居中。
代码如下:
这里的rem根据的html的font-size大小是37.5px
<div class="top">
<div class="top-left">
<i class="iconfont icon-zuojiantou"></i>
</div>
<div class="top-right">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder="请输入内容">
</div>
</div>
.top {
display: flex;
width: 100%;
line-height: 1.333rem;
}
.top .top-left {
padding: 0 .4rem;
}
.top .top-right {
width: 8rem;
height: 0.71rem;
margin: .33rem 0;
color: #999;
background-color: #fff;
line-height: 0.69rem;
font-size: 0.47rem;
border-radius: 30px;
padding: 0 .3rem;
}
.top .top-right input {
outline: none;
border: 0;
width: 7rem;
}
.top .iconfont {
font-size: 0.47rem;
}