使用表格单元样式化UL的问题

Question

我想向我的网站展示“它是如何工作的”部分：

https://codepen.io/carlosmr/pen/NVbbmx

问题是，如果文本在右侧过长，则左侧数字会随之增加，例如数字4。

有没有一种方法可以将数字留在左侧，文本留在右侧而没有问题呢？谢谢！

.uli {
    list-style: none;
    float: left;
    width: 100%;
    padding: 0;
}

.uli li {
    padding-bottom: 80px;
    float: left;
    width: 100%;
    position: relative;
}

.uli li span {
    border-radius: 50%;
    border: 1px solid #eaeaea;
    width: 100px;
    height: 100px;
    line-height: 30px;
    margin-right: 10px;
    background-color: #eaeaea;
    display: inline-block;
    position: relative;
    text-align: center;
	display: table-cell;
    vertical-align: middle;
	color: #fff;
	font-size: 3em;
}

.uli li:before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    left: 49px;
    background: #eaeaea;
    z-index: -1;
}

.uli li:last-child:before {
    display: none;
}
.uli .ulcontent{
	display: table-cell;
    vertical-align: middle;
	padding-left: 100px;
}
.entry-content .uli > li{
    list-style-type: none;
}

<ul class="uli">
				<li>
					<span>1</span>
					<div class="ulcontent">
						<h3>Primer contacto</h3>
						<p>Contactas conmigo y me cuentas tu idea. Si quieres puedes hacerlo <a href="#">Aquí</a></p>
					</div>
				</li>
				<li>
					<span>2</span>
					<div class="ulcontent">
						<h3>Consultoría web</h3>
						<p>Organizamos una entrevista para conocernos y aclarar las bases del proyecto.</p>
					</div>
				</li>
				<li>
					<span>3</span>
					<div class="ulcontent">
						<h3>Diseño web</h3>
						<p>Empieza la creación de un diseño para tu proyectos basado en las necesidades del mismo</p>
					</div>
				</li>
				<li>
					<span>4</span>
					<div class="ulcontent">
						<h3>Desarrollo</h3>
						<p>Una vez se apruebe el diseño definitivo comenzamos la fase de desarrollo, en la cual se programa el tema totalmente desde cero y se le añaden todas las funcionalidades a la web</p>
					</div>
				</li>
				<li>
					<span>5</span>
					<div class="ulcontent">
						<h3>Implementación</h3>
						<p>En este momento se añade el contenido, se personaliza y se traslada a tu servidor para que puedas administrarlo tu mismo</p>
					</div>
				</li>
				<li>
					<span>6</span>
					<div class="ulcontent">
						<h3>Consultoría previa</h3>
						<p>Nos reuniremos por videoconferencia para conocernos y sentar las bases de lo que será tu nuevo sitio de membresía. ¿Estás listo? ¡Vamos allá!</p>
					</div>
				</li>
			</ul>

Answer 1

您可以将以下样式添加到<span>标记内的<li>标记中。

display: block;
float: left;
line-height: 100px;

检查已编辑的密码笔

Edited version