CSS display inline properties and usage

 The attribute of CSS display inline is used to define the elements to be displayed on the same line, that is, the image or text does not wrap. The corresponding usage is display block . We will do a detailed introduction in another article. If your text ( Often used in the title) If you don't want to wrap, you can use the display inline technique. Please see the following example.

CSS display inline syntax example 1. DIV block horizontal and horizontal

<div style="display:inline;">Element one</div><div style="display:inline;">Element two</div>

The example presents the results as

Element one element two

What we must first explain is that the outer frame of the result is added, just to make the example clearer. The two <div> blocks in the example should be the result of two rows, but we use display :inline forces two <div>s not to wrap, so the two <div> blocks are arranged on the same line obediently. But if the combined width of the two <div> blocks exceeds the range of the gray dashed frame, it will still be automatically folded to the next line, because there is not enough space, of course you can’t force it!

Also display: inline also may overflow with make some changes, such as when the title is too long, but do not want to wrap the display, you can use display: inline with overflow hidden skills (overflow: hidden) to achieve, which many large sites Skills commonly used in layout.

CSS display inline example 2: ul li horizontal

<style type="text/css">
<!--
#B ul li {
　display:inline;
}
-->
</style>
<div id="A">
<b>Original rendering</b>
<ul >
　<li>Here is project one</li>
　<li>Here is project two</li>
</ul>
</div>
<div id="B">
<b>Horizontal and horizontal rendering</b>
< ul>
　<li>This is project one</li>
　<li>This is project two</li>
</ul>
</div>

The above example presents the result (for detailed explanation, please refer to: CSS ul li horizontal level )

Original presentation
　●Here is item 1
　●Here is item 2
Horizontally presented
　Here is item 1Here is item 2

In the example, we have prepared two different DIV blocks, which contain </ul></li> item tags. The first block (id="A") is the original rendering effect, and the default is vertical layout. And there is a black dot in front of each item as the beginning, and the second block (id="B") uses the attribute of CSS display inline to make each </li> item present a horizontal and horizontal layout effect.