A few magical uses of CSS Inline-block

Objective

Inline-block, we usually use a lot of the most common use is a few div in a row to display, we use Display:inline-block. The reason for writing this article today is to write a few of the more peculiar usages of inline-block.

Implement div width Adaptive to content

We know that DIV is block-level elements, if we do not set the width, then the width of the div is 100%; Q: What to do if div width is adaptive to content?

Take a look at the following code:

<div class= "Parent" >
<div class= "Children" > Welcome to Haorooms Blog, this article is about Inline-block usage </div>
</div>
<style type= "Text/css" >
. parent{
width:800px;
height:400px;
border:1px solid red;
}
. children{
BORDER:1PX solid blue;
height:50px;
}
</style>
We will see, children will be full of parent, how to let children content adaptive? Today we mainly talk about the Inline-block, yes, plus inline-block on it, we put the above code slightly improved!

. children{
BORDER:1PX solid blue;
height:50px;
Display:inline-block;
*display:inline; Compatible with low version IE browser
*zoom:1;//compatible with low version IE browser
}
Div will adapt to the content!

Center-align based on parent element

The scene is like this, there is a parent element div, width is 1000px; the parent div has many a tags, or div, and asks, how do you align the child elements in the center?

Some friends do this:

Put all the elements of the outer layer of a Div, give div a width, and then use margin:0 Auto, this way to align, this way alignment has a disadvantage, because your width of the div can not completely cover the elements inside, This way the elements inside are not completely centered relative to the outermost div.

In Inline-block way:

The parent Div gives a text-align:center; all the child elements give a display:inline-block; it's OK!
The case is as follows:

Enter image description here

The above image is the toggle button, which is aligned with Inline-block.

<ul class= "Bottomcontrol" >
<li data-tab-index= "0" class= "Lpdot" ></li>
<li data-tab-index= "0" class= "Lpdot lpcur" ></li>
<li data-tab-index= "0" class= "Lpdot" ></li>
<li data-tab-index= "0" class= "Lpdot" ></li>
<li data-tab-index= "0" class= "Lpdot" ></li>
</ul>

. Bottomcontrol {
height:40px;
width:100%;
Text-align:center;
}

. Lpdot {
width:14px;
height:14px;
margin:15px 5px 0px 5px;
Background-color: #dfcea5;
border-radius:7px;
Display:inline-block;
Cursor:pointer;
}
Summary

The above is a few applications of inline-block, although very simple, but once you do not use Inline-block, realize is relatively troublesome, and the effect is not satisfactory!