form inner line

表单左右两边拓展

HTML

<!-- 带icon输入类型 -->
<div class="form-item is-tips">
	<div class="form-item-prepend"><span>手机号</span></div>
	<input type="number" placeholder="请输入手机号">
	<div class="form-item-prepend"><span>icon</span></div>
	<div class="form-item-tips">我是报错提示</div>
</div>

<!-- 手机验证码类型 -->
<div class="form-item">
	<div class="form-item-prepend"><span>验证码</span></div>
	<input type="number" placeholder="请输入短信验证码">
	<div class="form-item-append">
		<a id="GetCode" class="form-item-code sl-btn">获取验证码</a>
	</div>
</div>

CSS

.form-item{
	width:100%;
	position:relative;
	display:table;
	padding:5px 0;
	border-bottom:1px solid #e6e6e6;
}
.form-item input,
.form-item select{
	display:table-cell;
	vertical-align:middle;
	width:100%;
	line-height:inherit;
	height:40px;
	padding-right:8px;
	border:none;
	outline:none;
	-webkit-appearance:none;
	background-color:transparent;
	padding:10px 0;
}
.form-item .form-item-prepend,
.form-item .form-item-append{
	display:table-cell;
	vertical-align:middle;
	white-space:nowrap;
}
.form-item .form-item-prepend{
	padding:0 5px 0 10px;
	width:85px;
}
.form-item .form-item-code{
	width:120px;
	font-size:1em;
	text-align:center;
	background:none;
	background-color:#fff;
	color:#f85032;
}
.form-item .form-item-code.active{
	color:#bbbbbb;
}
.form-item.is-tips{
	padding-bottom:25px;
}
.form-item .form-item-tips{
	font-size:0.9em;
	position:absolute;
	left:0;
	right:0;
	bottom:5px;
	padding-left:10px;
    color:red;
}
.sl-btn{
	display:inline-block;
	width:100%;
	text-decoration:none;
	color:#fff;
	font-size:1.2em;
	background:#f85032;
	padding:10px 0;
	text-align:center;
    cursor: pointer;
	background:-webkit-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:   -moz-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:    -ms-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:     -o-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:        linear-gradient(to right, #f85032 0%, #e73827 100%);;
}
.sl-btn.radius{
	border-radius:5px;
}