html - 使用 table-cell 设置 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;

查看编辑好的codepen

Edited version