Set fixed width for span

Tags are used to combine the line elements in a document. I believe that we are very familiar with web designers and use them quite frequently. However, we often seldom set the style for SPAN, which is generally unnecessary. Most of them are left to old friends of DIV.

When I was working on the "kind community" project, I used SPAN. Because it was used to implement block placement, I defined a fixed width for it, so I thought it was very confident, when a webpage is executable, I find that the specified width has no effect. After a few minutes, the seemingly simple style definition is ineffective. Later, I searched for relevant information on the Internet and explained it as follows:

The width attribute in CSS is not always valid. if the object is an inline object, the width attribute is ignored. Firefox and IE follow the standard.

After knowing the cause, the solution will come out, as shown in the Code:

style="width:600px;text-align:left;display:inline-block;"

Effect Comparison

The following describes tags in detail.

Original code:

Zhang lianhai

The effect is as follows:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Authorization + authorization + 22ydwvc3ryb25np1_vcd4kpha + ICAgILe9t6jI58/Co7o8L3A + authorization = "brush: java;"> span {width: 60px; text-align: center; display: block ;}

Test instance:

Zhang lianhai

Test results:

2. Set SPAN to fixed width for lines in the ABCDEF format

The method is as follows:

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

Test instance:

   
   
    
    
    
Zhang lianhai's blog
    
    
    
Zhang lianhai Huan yingguang
   
   

Test results:

3. Set SPAN to fixed width for lines in ABCDEFGH format

The method is as follows:

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

Test instance:

   
   
    
    
    
Welcome to Zhang lianhai's blog
    
    
    
Welcome to Zhang Lian Hai Huan yingguang
   
   

Test results:

Tip: Perfect compatibility is to set the display attribute to inline-block, and be compatible with the first two cases.

Iv. Differences among block, inline, and inline-block

Display: block; -- element features that can be customized for attributes such as the width, height, and margin of DIV labels;

Display: inline; -- similar,Attributes with higher width of tags cannot be customized;

Display: inline-block; -- "all" customizable attribute element features;

5. How to set the SPANfloat: right without line breaks

1. How to make

AAABBB

Does the BBB in it depend on the right alignment and does not wrap the line?

If the float attribute is used for span, the span will be changed to the next line under IE6, and Firefox will be normal. You can use the following relative positioning method to achieve peer and right alignment.

li {position:relative;}li span{position:absolute;right:0px;}

2. Reverse writing is also convenient

For example, write

AAABBB

In this way, put AAA in the SPAN and BBB out. You only need:

li {text-align:right;}li span{float:left;}