Talking about some magical usages of inline-block

  Preface

  Inline-block, we usually use a lot of the most common use is a few div in a row, 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 according to content adaptive   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?   See 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 that children will be full of parent, How to make 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 the low version IE browser writing   *zoom:1;//compatible with the low version of IE browser writing} Div will adapt to the content!   Center alignment based on parent elements   scenario is 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 alignment, this way alignment has a disadvantage, because you give the width of theThe div cannot completely wrap the elements inside so that the elements inside are not fully centered relative to the outermost div.   in Inline-block mode:   Parent Div to a text-align:center; all child elements to a display:inline-block; it's OK! The case is as follows:   Enter image description Here   The image above is a toggle button, which is aligned with Inline-block.   <ul class= "Bottomcontrol" >                       &NBSP ;             <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;     BACKG Round-color: #dfcea5;     BORDER-RADIUS:7PX;     Display: Inline-block;     Cursor:pointer; Summary   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!