Create an unlimited number of toolbar buttons on the mobile terminal H5 by FungLeo

Create an unlimited number of toolbar buttons on the mobile terminal H5 by FungLeo
Create an unlimited number of topic buttons on the mobile terminal H5 by FungLeo Preface

Some buttons on the mobile h5 page are frequently required. of course, it is very simple to create a button on the entire bar. however, product managers and designers will always bother you. for example, the button is in the same format, but here is a bar button, to the bottom, it becomes a bar requires two buttons, go to the inner page, that is, three buttons are pushed to one sidebar.

If there is no reasonable solution, it is undoubtedly very disgusting. because we must write multiple styles. but we always want to write less code. Is there any good solution for implementation?

There are actually some. below, this blog post will let us implement this challenge.

Expected results.

You may have read the above text and have not understood what I want to express. Next, let's look at the next one and you will understand what I'm talking about.

As shown in, the first is a button in the entire bar, the second row is two buttons, and the third row is three buttons.

I hope that one type of CSS can meet all these requirements, and the html structure is very simple. How can this problem be achieved? See the following code:

Html Structure

OK
Payment canceled order
Set as defaultDelete

As shown in the code above.

ThebrTo separate the distance between buttons, mainlydiv.button_boxContent.

The structure of html should be quite simple. First, the outer layer isdiv.button_boxIn the box, And what buttons are needed, you can write a. button's non-auto-closed and element.

Non-autistic and element referbr\hr\inputOther elements except the auto-closing element.

In the third line, we demonstrated the common box, link, and button writing.

Because buttons are closed and elements, we uselabelElement to make it available.

SASS

First, reference reset. scss and mixin. scss. For details, refer to basic reset. scss and mixin. scss of H5 series blog posts on mobile terminals.

Second, CSS is written in SASS syntax. If not, please refer to the SASS Learning Experience Summary of CSS pre-compilation technology.

. Button_box {display: table; // simulate the outer box of button_box into the table width: 100%; // If the table is not a complete block-level element, you need to set the width of table-layout: fixed; // set the cell width in the table to auto-equal width. Important! Border-collapse: collapse; // merge the table and cell border. button {display: table-cell; // simulate child elements into cells font-size: 1.5rem; text-align: center; background: # eee; color: #555; // set the default button style box-shadow: 0 0 0 1px # ddd; // use the shadow to simulate the border (the shadow does not occupy the box model) text-decoration: none; // If the element is a link, remove the underline @ include hlh (4.8rem); // reference the height row high hidden overflow code block &. pink {// set a special button style. You can set multiple background: # F13E7A; color: # fff; box-shadow: 0 0 0 1px # F13E7A ;} input {display: none;} // hide the button if yes }}

I have already put the sass explanation in the comments. The main consideration is to use the special attributes of the table to implement this seemingly laborious requirement.

Summary

What a magical element a table has. since we used table layout in those years, the code was as smelly and long as the old lady's cloth, so we set off a boom in div + css. as a result, we ignore many awesome features of tables.

In fact, the table is awesome. Through this case, we use the table to successfully solve this seemingly difficult requirement and achieve great results.

Html elements are far from block-level elements and inline elements. They have many attributes. We also need to try and understand them. They look simple. Are you sure you want to be simple?