Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

CSS fixed width in a span

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.
by

2 Answers

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

<style type="text/css">

span {
display: inline-block;
width: 50px;
}

</style>
RoliMishra
The <span> tag will need to be set to display:block as it is an inline element and will ignore width.

so:

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

and then:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

Login / Signup to Answer the Question.