微博输入框布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博输入</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.box{width:500px;height:190px;margin:10px auto;border: 5px solid #0080c0;}
.box p{margin: 0;}
.box .lt{padding: 8px 10px;float: left;font-size: 16px;color:#1B7FB6;}
.box .rt{padding: 8px 10px;float: right;font-size: 14px;}
#text{width: 485px;height: 100px;float: left;margin: 0px 5px;resize:none;border: 1px solid #ccc;}
.huati{height:20px;float: left;margin:10px 0px;}
.huati #sp1,#sp2,#sp3,#sp4,#sp5{float: left;font-size: 14px;color: #201a1a;text-decoration: none;}
.huati i{margin:2px 3px 0px 5px;float: left;}
.butt{float: right;}
#bt{background: darkorange;color: #fff; width:80px;height:30px;line-height: 30px;text-decoration: none; margin:5px;text-align: center;border-radius: 3px;border: none;}
</style>
</head>
<body>
<div class="box">
<p class="lt">有什么新鲜事想告诉大家?</p>
<p class="rt">还可以输入 <span id="num"></span>字</p>
<textarea id="text"></textarea>
<div class="huati">
<i class="fa fa-meh-o" style="color:darkorange;"></i><span id="sp1">表情</span>
<i class="fa fa-picture-o"style="color:#008000;"></i><span id="sp2">图片</span>
<i class="fa fa-video-camera"style="color:#0080ff;"></i><span id="sp3">视频</span>
<i class="fa fa-hashtag"style="color:#0080ff;"></i><span id="sp4">话题</span>
<i class="fa fa-bolt"style="color:#f60;"></i><span id="sp5">头条文章</span>
</div>
<div class="butt">
<input type="button" value="发布" id="bt">
</div>
</div>
</body>
</html>