How to set the span tag to a fixed width in CSS

one, the shape such as <span>ABC</span> independent line set span to fixed width method as follows:

span {width:60px; text-align:center; display:block;}

Actual verification results: IE6 OK, FIREFOX 3 OK.

one, such as <SPAN>ABC</SPAN>DEF format line set span to fixed width method is as follows:

span {width:60px; text-align:center; Display:block; Float:left;}

Actual verification results: IE6 OK, FIREFOX 3 OK.

two, shape as Abc<span>def</span>gh format line to set span to fixed width method is as follows:

span {width:60px; text-align:center; Display:inline-block;}

Actual verification results: IE6 OK, FIREFOX 3 OK.

Tip: The perfect compatibility is to set the display property to Inline-block, which is compatible with the first two cases.

the difference between Block,inline,inline-block:

display:block;--attributes such as the width and height margin of a div tag can be customized;

display:inline;--features that are not customizable for the wide and advanced properties of <a>, <strong> tags;

display:inline-block;--"All" customizable attribute element characteristics;

Add:

1, how to let the BBB in <li>AAA<span>BBB</span></li> in the right alignment and do not change line.

A: If you use the Float property with span, it always causes the span to wrap to the next line. You can use the following method to achieve your peers and right-aligned.

Li {position:relative;}

Li span{position:absolute;right:0px;}

can be achieved.