Dentro de una lista desordenada:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Se permite añadir una clase o un atributo de estilo, pero no se permite rellenar el texto ni añadir o cambiar etiquetas.
La página se está renderizando con Courier New.
El objetivo es tener el texto después del span alineado.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
La justificación del "O" no es importante.
El texto del animal perezoso puede ser envuelto en un elemento adicional, pero tengo que volver a comprobar.
-- begin snippet: js hide: false console: true babel: false -->
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}
<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>
...fin del fragmento..;
Como dijo Eoin, necesitas poner un espacio de no ruptura en tus "vacíos" spans, pero no puedes' asignar un ancho a un elemento en línea, sólo padding/margin así que necesitarás hacerlo flotante para poder darle un ancho.
Para un ejemplo de jsfiddle, ver
Desgraciadamente, los elementos inline (o los que tienen display:inline) ignoran la propiedad width. En su lugar, debes utilizar divs flotantes:
<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>
<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>
Ahora veo que necesitas usar spans y listas, así que tenemos que reescribir esto un poco:
<html><head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 60px; }
li { list-style-type: none; }
</style>
</head><body>
<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>
Se puede hacer usando una tabla, pero no es CSS puro.
<style>
ul{
text-indent: 40px;
}
li{
list-style-type: none;
padding: 0;
}
span{
color: #ff0000;
position: relative;
left: -40px;
}
</style>
<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>
Ten en cuenta que no se muestra exactamente como quieres, porque cambia de línea en cada opción. Sin embargo, espero que esto te ayude a acercarte a la respuesta.