起初遇到的情况是这个样子的:
我想要实现的效果如下
span标签和搜索按钮的宽度是固定部变的，但是搜索框的宽度需要是100%,为了实现这样的效果，我只能把span和button标签进行绝对定位到相应的位置，这样以后我会得到如下的效果
很显然这不是我想要的效果，所以我可以把input的padding-left属性设置为30px，我以为这样就可以实现最上面的效果了，但是由于padding-left以后整个input的宽度也会发生变化，input的宽度就增大了，也不是100%了，很明显这不是我想要的效果
宽度已经部对了，所以这个时候的解决办法就只有css3的属性box-sising了，我给input设置box-sising:border-box以后它就变成了我想要的样子，刚开始觉得很神奇，然后仔细阅读了box-sising的文档，了解到如下的一些知识:
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
参考:
我的理解就是让你设置的区域宽度用百分比固定为父元素的宽度对应的百分百，不会收到padding把把盒子撑大的效果
大概就是这样的，解决方案就帮我想的。这个项目是一个web app现在用的是弹性布局，后期会用botstrap加上响应式布局，这个项目的ui完全是用实现的。