"Front" CSS adaptive width sliding door Menu

HTML css width self-adapting

What is the CSS adaptive width sliding door menu?

CSS Adaptive width menu refers to the width of the menu can be widened as the content increases, the edge of the instance, the 4-word width to design, if one of the 5 words or more, it will not fit. Then we need to make its width change as the content increases or decreases, which is the CSS Adaptive width menu.

What is the effect of the adaptive width button?

So, how is the adaptive width button implemented?

To achieve an adaptive width, you need to add a secondary label to the text, such as span, to set the background on a and span, a left-aligned, a right-aligned

The green section is span, and then the background picture is defined to align to the right, while the left part is a background image, which defines the left alignment. When the text is long, the span is stretched, which implements the adaptive width of the button. Here need a picture, its width is wider than the widest width you apply, so as to show normal, and based on the previous learning of CSS sprites technology, the background image and mouse through the picture on a picture.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Front" CSS adaptive width sliding door Menu