Home > Developer > Web Develop
displayproperty specifies the type of box that the element should generate.
This property is used to define the type of display box generated by the element when the layout is established. For document types such as HTML, it can be dangerous to use display without caution because it may violate the display hierarchy already defined in HTML. For XML, all display is absolutely necessary because XML does not have this hierarchical structure built into it.
Browser support:
Properties are supported by all major browsers display .
Note: Any version of Internet Explorer (including IE8) does not support,,,,,,,,, and
"inherit""inline-table""run-in""table""table-caption""table-cell""table-column""table-column-group""table-row""table-row-group"attribute values.
Because the display：inline-block same effect can be achieved when the block-level element is set float . is to make the block-level element end without a newline character. So when do you use float and when to use it display：inline-block ?
1.1Most
floatof the time it appears to handle text wrapping. So when we use float to wrap text around and handle non-text wrapping, we use it as adisplay：inline-blockpriority.
float<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Floatnav</title> <style type="Text/css"> Body,ul{margin:0; padding:0; } #body-div{ background-color:#eaebea; Height: +px; / * Set the LI line-break display when the browser window is shorter * / Overflow:hidden; / * This is mainly to let the parent div follow the content of the automatic extension * / float:left; } ul Li { list-style:none; float:left; border-right:1px solid #d2d5d2; line-height: +px; padding: 0 px; } ul Li a{ text-decoration:none; } a: Link,a: Visited{color:#3f3b3c;} a: Hover{color:#fd687f;} </style></head><body> <div id="Body-div"> <ul> <li><a href="">Home</a></li> <li><a href="">Content 1</a></li> <li><a href="">Content 2</a></li> <li><a href="">Content 3</a></li> <li><a href="">Content 4</a></li> <li><a href="">Content 5</a></li> <li><a href="">Content 6</a></li> <li><a href="">Content 6</a></li> </ul> </div></body></html>In Chrome and Firefox and IE, the results are as follows:
display：inline-block<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Inlinenav</title> <style type="Text/css"> Body,ul{margin:0; padding:0; } #body-div{ background-color:#eaebea; Height: +px; / * This is mainly to let the parent div follow the content of the automatic extension * / display:inline-block; / * Set the LI line-break display when the browser window is shorter * / Overflow:hidden; margin:0 auto; } ul Li { list-style:none; display:inline-block; border-right:1px solid #d2d5d2; line-height: +px; padding:0 px; } ul Li a{ text-decoration:none; } a: Link,a: Visited{color:#3f3b3c;} a: Hover{color:#fd687f;} </style></head><body> <div id="Body-div"> <ul> <li><a href="http://www.baidu.com" target="_blank">Home</a></li> <li><a href="">Content 1</a></li> <li><a href="">Content 2</a></li> <li><a href="">Content 3</a></li> <li><a href="">Content 4</a></li> <li><a href="">Content 5</a></li> <li><a href="">Content 6</a></li> <li><a href="">Content 7</a></li> </ul> </div></body></html>The effect of this code in Chrome and Firefox,ie (>=8) is as follows:
The effect in IE (<=7) is as follows:
Because IE (<=7) does not support display attributes (beginning with an explanation of display).
"Learning Web front end from 0 to 1" CSS positioning Problem II (use of float and display)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
