CSS fixed width in a span

Question

Within an unordered list:

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

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.

codeinthehole_32640 · Answer

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

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

touqen_33437 · Answer

ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}


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

Like Eoin said, you need to put a non-breaking space into your "empty" spans, but you can't assign a width to an inline element, only padding/margin so you'll need to make it float so that you can give it a width.

For a jsfiddle example, see http://jsfiddle.net/laurensrietveld/JZ2Lg/

user_8954 · Answer

Unfortunately inline elements (or elements having display:inline) ignore the width property. You should use floating divs instead:



The Lazy dog

AND
The Lazy cat

OR
The active goldfish

Now I see you need to use spans and lists, so we need to rewrite this a little bit:






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

Slace_11388 · Answer

The tag will need to be set to display:block as it is an inline element and will ignore width.

so:

and then:

 something
ANDsomething else

user_948359 · Answer

Using HTML 5.0, it is possible to fix width of text block using or

.

For , what is important is to add following CCS line

display: inline-block;

For your empty what is important is to add space.

My code is following

body
 {
 font-family: Arial;
 font-size:20px;
 }

div
 {
 width:200px;
 font-size:80px;
 background-color: lime;
 }
div span
 {
 display:block;
 width:200px;
 background-color: lime;
 }

ul li span
 {
 display: inline-block;
 width: 80px;
 background-color: yellow;
 }
span.tab
 {
 display: inline-block;
 width: 80px;
 background-color: yellow;
 }

<DIV>

ABCDEF

<SPAN>


    ABCDEF



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

PS: I have defined tab class because ul li span CSS selector is not working on my PC !

luiscubal_32775 · Answer

You can do it using a table, but it is not pure CSS.





The lazy dog.
ANDThe lazy cat.
ORThe active goldfish.

Note that it doesn't display exactly like you want, because it switches line on each option. However, I hope that this helps you come closer to the answer.

user_23669 · Answer

Well, there's always the brute force method:

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

Or is that what you meant by "padding" the text? That's an ambiguous work in this context.

This sounds kind of like a homework question. I hope you're not trying to get us to do your homework for you?

user_11208299 · Answer

ul {
 list-style-type: none;
 padding-left: 0px;
}

ul li span { 
 float: left;
 width: 40px;
}


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

CSS fixed width in a span

11 Answers