Search box-input adaptive in div

When you need to develop such a search box as above.

Because it is mobile development, mobile phone screen width of uncertainty, so can not use the usual fixed width development.

Analysis such as:

1. The search box consists of two parts: Input search box + Cancel button;

2. The distance between the left and right sides of the search box is fixed, that is, 1 and 2 are equal in the figure;

3. The size of the Cancel button is fixed, and the distance from input is fixed;

4.input adapts to changes in screen width.

Code:

<! doctype html>


Search box-input adaptive in div