CSS display Display:inline, we often use it in Li. function is to make Li into a row

In the general CSS layout, we often use the display corresponding to the value of block, none, inline three values. Let's come to know each other and learn when to use the values. Here, we will learn and understand the DIV CSS displayby using CSS display knowledge plus examples and diagrams to illustrate the way.

Directory

2. CSS Display uses
4. What is the value of display
6. CSS Display block displays
8. CSS Display none hidden
10. CSS Display inline

First, CSSdisplay use - TOP

The following is a div CSS using dispaly, indicating here dispaly value arbitrary

CSS code: . Divcss5{display:none}

HTML corresponding to use: <div class= "DIVCSS5" > I was testing the content </div> according to the above can own div+css, see the results

Common Display 1, Div{display:block} has a newline effect. case: Picture to do background, hide picture on text http://www.divcss5.com/jiqiao/j55.shtml

2, Div{display:none} hidden objects and object content. case: CSS hides HTML content http://www.divcss5.com/jiqiao/j55.shtml

3, Div{display:inline} in a row display. representative case, default row for Li list display li{display:inline}

Ii. what is the value of display - TOP

CSS display values and explanations-(detailed visual CSS manual CSS display manual) Parameters:
Block: The default value of the Block object. Add a new row after the object with this value none: Hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for the hidden object inline: The default value for inline objects. Use this value to remove the row compact from the object: Allocates objects as block objects or inline objects based on content marker: Specifies the content before or after the container object. To use this parameter, the object must be in conjunction with: After and: Before pseudo-elements using inline-table: To display the table as inline or inline with no front-and-back wrapping List-item: Specifies the Block object as a list item. Optionally, you can add an optional item flag run-in: an inline object that allocates an object as a block object or based on content table: Display an object as a block-element-level table Table-caption: Display an object as a table caption Table-cell: Display an object as a table cell Table-column: Display an object as a table column Table-column-group: Displays the object as a table column group Table-header-group: Displays the object as a table header group Table-footer-group: Display an object as a table footer group Table-row: Displaying an object as a table row table-row-group: Displaying an object as a table row group

Third, CSS display block - TOP

Display:block is what we use, and block is the default value for display. Explanation: The contents of the object are then wrapped automatically. CSS Display block instance

CSS code:

1. . Divcss5{display:block}

HTML corresponding to the use of code:

2. <span class= "DIVCSS5" > my back text will be wrapped </ span> I was wrapped by the previous divcss5 corresponding to the CSS property.  
4. <span> won't be wrapped because I'm not set Display:block</span>

Corresponding results: This shows the use of span as an instance, a CSS style set, a not set, you can compare the object that is set div display:block style subsequent content is wrapped.

Four, CSS display none hidden content - TOP

The none value of this display, which we also use frequently, is used to hide object content, and objects that are hidden do not occupy their intrinsic width height space. Details visible css hidden explanation: http://www.divcss5.com/jiqiao/j55.shtml

V, CSS Display inline - TOP

Display:inline, we often use it in Li. The function is to make Li into a row (called Delete row). Next, we present a demo with an example of setting up the Li list with a CSS Display inline style comparison.

CSS code UL.DIVCSS5 li{display:inline} explanation: Ul.divcss5 corresponding Li CSS style property is Display:inline

HTML corresponding code:

2. <ul>
4. <Li> My parent ul no divcss5 style </li>
6. <li> I am a lone </li>
8. <li> I am a lone </li>
10. </ul>
14. <ul class="DIVCSS5">
16. <Li> My parent ul has divcss5 style </li>
18. <li> I stand in a row </li>
20. <li> I divcss5 li stand in a row </li>
22. </ul>

Demo Result diagram: Description: Sets the Li object for CSS Display:inline, Li is lined up, and the not set Li List object still inherits the original CSS style of its own line.

CSS display Display:inline, we often use it in Li. function is to make Li into a row