css左边固定_右边自适应兼容性好

效果图如下:

完整代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.con {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 90%;
				/*max-width: 400px !important;*/
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
				-o-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
				background-color: #eee;
				padding: 15px;
				border-radius: 8px;
			}
			
			.row {
				width: 100%;
				zoom: 1;
				overflow: hidden;
				padding-left: 70px;
				margin: 8px 0;
				box-sizing: border-box;
			}
			
			.row_l {
				float: left;
				width: 70px;
				margin-left: -70px;
				height: 35px;
				line-height: 35px;
			}
			
			.row_r {
				float: left;
				width: 100%;
				height: 35px;
				line-height: 35px;
			}
			
			.row_r>input {
				width: 100%;
				height: 35px;
				line-height: 35px;
				border: none;
				padding-left: 10px;
				background-color: #fff;
				outline: none;
			}
		</style>
	</head>

	<body>
		<div class="con">
			<div class="row">
				<div class="row_l">填写单号</div>
				<div class="row_r">
					<input type="text" placeholder="请填写物流单号" />
				</div>
			</div>
		</div>
	</body>

</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。