css实现竖向步骤条-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title></title>
		<base target="_blank" />
		<style>
			.hovertree-tracklist ul li {
				list-style: none;
			}

			.hovertree-trackrcol {
				max-width: 900px;
				border: 1px solid #eee;
			}

			.hovertree-tracklist {
				margin: 20px;
				padding-left: 5px;
				position: relative;
			}

			.hovertree-tracklist li {
				position: relative;
				padding: 9px 0 0 25px;
				line-height: 18px;
				border-left: 1px solid #d9d9d9;
				color: #999;
			}

			.hovertree-tracklist li.first {
				color: red;
				padding-top: 0;
				border-left-color: #fff;
			}

			.hovertree-tracklist li .node-icon {
				position: absolute;
				left: -6px;
				top: 50%;
				width: 11px;
				height: 11px;
				background: url(http://hovertree.com/texiao/css/25/img/order-icons.png) -21px -72px no-repeat;
			}

			.hovertree-tracklist li.first .node-icon {
				background-position: 0 -72px;
			}

			.hovertree-tracklist li .time {
				margin-right: 20px;
				position: relative;
				top: 4px;
				display: inline-block;
				vertical-align: middle;
			}

			.hovertree-tracklist li .txt {
				max-width: 600px;
				position: relative;
				top: 4px;
				display: inline-block;
				vertical-align: middle;
			}

			.hovertree-tracklist li.first .time {
				margin-right: 20px;
			}

			.hovertree-tracklist li.first .txt {
				max-width: 600px;
			}

		</style>
	</head>
	<body>
		<div class="hovertree-trackrcol">
			<div class="hovertree-tracklist">
				<ul>
					<li class="first"><i class="node-icon"></i><span class="time">2016-06-06</span><span
							class="txt">111111111111111111111111111</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span>
					<span class="txt">22222222222222222222</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span><span
							class="txt">333333333333333333333</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span><span
							class="txt">444444444444444444444</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-05 </span><span
							class="txt">5555555555555555555</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-05 </span><span
							class="txt">666666666666666666666</span></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>
效果
在这里插入图片描述