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.

The goal is to have text after span lined up.

 The lazy dog.

AND The lazy cat.

OR  The active goldfish.

The 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

Try using the code given below:

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>

Note: You just need to put a non-breaking space into the "empty" spans, but you can't assign a width to an inline element, only padding/margin so you just have to make it float so that you can give it a width.

Refer to this link: http://jsfiddle.net/laurensrietveld/JZ2Lg/