效果如图:
直接上代码,具体看注释:
<header class="hasManyCity" id="header">
<!-- 左边部分。设置为左浮动,要设置宽度-->
<div class="loc" style="float: left; width:40px; height: 100%; text-align: center; padding-top: 5px;">
<i class="icon iconfont"></i><br/>厦门
</div>
<!-- 右边部分,设置为右浮动。要设置宽度-->
<div class="msg" style="float: right;">
<i class="icon iconfont"></i><br/>消息
</div>
<!-- 中间部分,不设置浮动(即float:none)和宽度(即 width:auto);设置左右的margin,以便给左右部分留出空间,否则会重叠在左右部分上;该部分代码放在最后 -->
<div style="margin-left: 50px; margin-right: 50px; padding-top: 10px;">
<div style="border: 1px solid #AAAAAA; height: 25px; background-color: #ffffff; border-radius: 10px;">
<i class="icon iconfont" style="float: left; padding: 5px 5px 0 5px;"></i>
<i class="icon iconfont" style="float: right; padding: 5px 5px 0 5px;"></i>
<div style="margin-left: 30px;margin-right: 30px; height:100%;">
<input type="text" style="border: 1px dotted green; width:100%; height: 100%;" />
</div>
</div>
</div>
</header>