效果如图:
直接上代码,具体看注释:
<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>