[解決済み] スパンでのCSS固定幅

質問

順不同のリスト内。

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

classやstyle属性の追加は可能ですが、テキストのパディングやタグの追加・変更は不可です。

このページは Courier New でレンダリングされています。

目標は、スパンの後のテキストを並べることです。

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

OR"の正当性は重要ではありません。

怠惰な動物のテキストは、追加の要素でラップされている可能性がありますが、私は再確認する必要があります。

解決方法は？

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>

Eoinが言ったように、"empty"スパンに改行しないスペースを入れる必要がありますが、インライン要素に幅を割り当てることはできず、padding/marginのみなので、幅を与えられるようにフロートにする必要があります。

jsfiddleの例としては、以下を参照してください。 http://jsfiddle.net/laurensrietveld/JZ2Lg/