Shulou(Shulou.com)06/03 Report--

How to use the display:inline-block attribute of CSS? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Display:inline-block feels somewhat similar to display:table-cell, such as the wrapping of internal elements. However, because the biggest difference of display:inline-block is that it has no parent element anonymous package feature, which makes the use of display:inline-block attribute is very free, can be mixed with text, pictures, can be embedded in block attribute elements, can be placed in inline-level elements. It can be described as black and white, both sides of the way.

The element of the inline-block attribute is suitable for the inline box model, so when the list elements in it are not high for a while, there will be no dislocation. All the inline elements and inline-block elements in each row work together to form a line boxes, and the height of the line box is determined by the highest element in it. So, even if the list element of the inline-block attribute is highly abnormal, it stretches the height of the entire line boxes, so it will not be misaligned with the list element of the next line. As shown in my own poorly drawn diagram below:

According to some predecessors, IE6/7 does not support the display:inline-block attribute, but allows tags to have attributes similar to inline-block. At first, I also accepted this view, but later expressed doubts and recently used text-align:justify. Some style performance when doing the test confirmed: it is true that IE6/7 does not support the display:inline-block attribute, just let it behave like inline-block, especially for inline-level elements, its performance can be described by the word perfect.

For IE8+ and modern browsers, directly use:

CSS Code copies content to the clipboard

{display:inline-block;}

It is fine, supporting any level of elements.

What about unsupported IE6/7 browsers? If it is an inline-level element (such as a tag, span tag, etc.) as above, directly:

{display:inline-block;}

That's fine. For these two browsers, it works the same as * zoom:1;.

If it is an element at the block level, such as the li tag. You need a little more code, and there are two methods I know so far, as follows:

CSS Code copies content to the clipboard

Li {display:inline-block;...}

Li {display:inline;}

Or:

CSS Code copies content to the clipboard

Li {display:inline; zoom:1;...}

The inline- blockization elements at the block level are different from those at the inline level at the presentation level.

The problem with inline-block

Looking at the above example, careful students will certainly find that there is a small gap between each li, and our code does not set margin and other related properties, this is why?

Default inline element

First, let's look at the behavior of the default inline element:

HTML code

XML/HTML Code copies content to the clipboard

Home page

Hot spot

CSS code

CSS Code copies content to the clipboard

A {margin: 0; padding: 0; border: 1px solid # 000;}

Effect picture

By default, there are gaps between inline elements, so the inline-block attribute that combines the inline and block attributes naturally has this feature.

What are these gaps? they are blank characters!

Eliminate whitespace

In browsers, white space characters are not ignored by browsers, and multiple consecutive white space browsers automatically merge them into one. The spaces and line breaks we write when we write the code will produce white space characters. So naturally there is a space between the two elements, and if you write the a tag in the above example on a line, the space disappears and the menus become compact.

Although the blank character is the normal behavior of the browser, usually, the designer's design draft will not appear these gaps, when we restore the design draft, how to remove these gaps.

To remove the gap created by the space character, you must first understand that the space character is ultimately a character, and the size of the gap can be controlled by setting the font-size property.

First, let's set font-size to 50px and modify the CSS code as follows:

CSS Code copies content to the clipboard

Ul, li {padding: 0; margin: 0; list-style-type: none; font-size:50px}

Li {display: inline-block; border: 1px solid # 000; width: 100px; text-align: center;font-size:12px}

We changed the font-size of ul to 50px, and the font-size of li to 12px to keep the original font size. The effect is as follows:

You can see that the gap between the menus has widened.

Then we set the font-site property to 0px, with the following code

CSS Code copies content to the clipboard

Ul, li {padding: 0; margin: 0; list-style-type: none; font-size:0px}

Li {display: inline-block; border: 1px solid # 000; width: 100px; text-align: center;font-size:12px}

The effect is as follows:

Compatibility problem

In IE8+,FF and Chrome browsers, inline-block is perfectly compatible. Considering the occupancy rate of low-version browsers such as IE6 and IE7, although there are ways to be compatible, this article will not repeat it. If you are interested, you can find relevant information.

Application of inline-block

What are the scenarios of inline-block application? When we all consider a technology application scenario, the first thing we must consider is whether the characteristics and requirements of the technology meet. The characteristic of inline-block is that it combines the specific attributes of inline and block, width and height can be set, and the elements keep the feature of inline arrangement. Based on this, all scenarios that are arranged inline and can be set size are all application scenarios that we can consider using inline-block. The following examples are given:

Page header menu

The menu in the header of a web page is a typical application that is arranged horizontally and needs to be set in size. Before inline-block, the implementation of menus was basically implemented with the float attribute, which will cause a high degree of collapse and need to clear floats. Using inline-block implementation does not need to care about such a problem. The code is as follows:

HTML code

XML/HTML Code copies content to the clipboard

Clothing city

Beauty salon

Supermarket

Global purchase

Flash purchase

Group purchase

Auction

Finance

Intelligence

CSS Code:

CSS Code copies content to the clipboard

A, ul, li {padding: 0; margin: 0; list-style-type: none;}

A {text-decoration: none; color: # 333;}

.header ul {font-size: 0; text-align: center;}

Header li {display: inline-block; font-size: 16px; width: 80px; text-align: center;}

Effect picture

This is to imitate the realization of JD.com 's front page navigation menu, and the horizontal menu list can be easily realized by using inline-block.

Inline block element

In addition to menus, all requirements that require inline arrangement and resizable can be implemented in inline-block.

For example, when using the a tag to make a button, we need to set the size of the button, and we can use inline-block to achieve it.

HTML code

XML/HTML Code copies content to the clipboard

Click the button on the right to buy directly.

Purchase

CSS code

CSS Code copies content to the clipboard

.button {display: inline-block; width: 150px; height: 45px; background: # b61d1d; color: # fff; text-align: center; line-height: 45px; font-size: 20px;}

Effect picture

Overall Arrangement

Inline-block can also be used for common layouts without paying attention to the problems caused by the layout of float attributes.

For example, create a common 3-column layout.

HTML code

XML/HTML Code copies content to the clipboard

Page header

Left side

Middle

Right

Bottom of the page

CSS code

CSS Code copies content to the clipboard

Body, div {margin: 0; padding: 0;}

.header, .footer {width: 100%; background: # ccc; height: 120px; text-align: center; line-height: 120px;}

.content {margin: 0 auto; background: # ff6a00; width: 1000px; font-size: 0;}

.content .left, .content .center, .content .rightright {display: inline-block; font-size: 16px; height: 400px;}

.content .left, .content .rightright {width: 200px;}

.content .center {width: 600px; background: # 00fffff;}

Effect picture

This example uses inline-block to make a common page layout.

With regard to the application of inline-block, as long as it is from left to right, from top to bottom, and need to set the size of the list can be implemented with it, and this requirement is very common, compared to float, I prefer inline-block. There should be many applications of inline-block, and you can dig it out.

Summary

Compared with the problems caused by using float, the main thing to pay attention to when using inline-block is the problem caused by blank characters, which can also be easily solved.

This is the answer to the question on how to use the display:inline-block attribute of CSS. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.