Display: inline-block in CSS

ArticleDirectory

• 1. display: inline-block
• 2. inline-block in IE
• 3. Other browsers
• 4. References
• 1. display: inline-block
• 2. inline-block in IE
• 3. Other browsers
• 4. References

1. display: inline-block

Let an element have the attribute of "block element" (width and height can be set), but also the attribute of "inline element" (no line feed is generated ).

2. inline-block in IE

IE6 does not support this attribute, but IE8 starts to support this attribute.

Enable the inline-block feature for IE6 inline Elements

Because inline-block triggers ie layout, you only need to set {display: inline-block;} in IE6.

There are two ways to make the IE6 block element have the inline-block attribute

A. You can trigger layout first and then set it to inline. Note that the two displays must be valid only in the two CSS declarations,CodeAs follows:

 
Div {width: 400px; Height: 200px; display: inline-block;} Div {display: inline ;}
 

B. Set it to inline directly, and use zoom to trigger layout to achieve similar results:

Div {width: 400px; Height: 200px; * display: inline; * ZOOM: 1 ;}
 

3. Other browsers

Other browsers support this attribute, but Firefox only supports this attribute from 3.0. For earlier versions, you can use its private attribute {display: -Moz-inline-box} to achieve similar results, but you can ignore versions earlier than 3.0 (these versions are rarely used by browsers ).

4. References

• CSS {display: inline-block}

 

 

 

1. display: inline-block

Let an element have the attribute of "block element" (width and height can be set), but also the attribute of "inline element" (no line feed is generated ).

2. inline-block in IE

IE6 does not support this attribute, but IE8 starts to support this attribute.

Enable the inline-block feature for IE6 inline Elements

Because inline-block triggers ie layout, you only need to set {display: inline-block;} in IE6.

There are two ways to make the IE6 block element have the inline-block attribute

A. You can trigger layout first and then set it to inline. Note that the two displays must be valid only in the two CSS declarations. The Code is as follows:

Div {width: 400px; Height: 200px; display: inline-block;} Div {display: inline ;}
 

B. Set it to inline directly, and use zoom to trigger layout to achieve similar results:

 
Div {width: 400px; Height: 200px; * display: inline; * ZOOM: 1 ;}
 

3. Other browsers

Other browsers support this attribute, but Firefox only supports this attribute from 3.0. For earlier versions, you can use its private attribute {display: -Moz-inline-box} to achieve similar results, but you can ignore versions earlier than 3.0 (these versions are rarely used by browsers ).

4. References

• CSS {display: inline-block}