CSS fixed width in a span

Question

Within an unordered list:

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

Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.

The page is rendering with Courier New.

Goal is to have text after span lined up.

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

Justification of the "OR" is unimportant.

The lazy animal text may be wrapped in an additional element but I'll have to double check.

Answer 1

In an ideal world you'd achieve this simply using the following css

<style type="text/css">  span {   display: inline-block;   width: 50px; }  </style> 

This works on all browsers apart from FF2 and below.

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

Quote taken from quirksmode