[Front-end] css adaptive width sliding door menu, css adaptive width sliding door

[Front-end] css adaptive width sliding door menu, css adaptive width sliding door

Html css width adaptive

What is the CSS adaptive width sliding menu?

CSS adaptive width menu indicates that the menu width can be wider as the content increases. For example, the width of the menu is set to 4 characters, if one of them is five or more words, it cannot be placed. Therefore, we need to make the width change with the increase or decrease of the content, 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 adaptive width, you need to add a secondary label on the text, such as span, to set the background on a and span respectively, one on the left and one on the right.

The green part is span, and then the background image is defined to align to the right, while the left part is the background image of a, which is defined to align to the left. When there is a large amount of text, the span will be extended, which realizes the adaptive width button. Here, we need an image as follows. The width of the image must be wider than the widest width of your application. In this way, the image can be displayed normally. Based on the previous css Sprites technology, place the background image and the mouse over the image to an image.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.