说明

实现下图效果

分析

难点

由于 css 的 基线对齐方式，会影响 输入框、照相机、按钮 的垂直对齐，所以，为了正常显示，不互相影响，让 button、input、span 脱离文档流

脱离文档流的方式：

• 设置浮动
• 使用 绝对定位，其父标签要设置 相对定位

代码

css：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .search_box{
        width: 546px;
        height: 32px;
        border: 2px solid #e2231a;
        position: relative;
    }
    .search_box > input{
        width: 425px;
        height: 26px;
        border: 0;
        padding: 2px 16.5px 2px 17px;
        /* 输入框获取焦点时，外边框不变色 */
        outline: none;
        position: absolute;
        top: 0px;
    }
    .pic{
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image: url(img/pic.png);
        background-size: 20px 20px;
        position: absolute;
        right: 75px;
        top: 6px;
    }
    .search_box a{
        text-decoration: none;
    }
    .search_box button{
        width: 58px;
        height: 32px;
        background-color: #e1251b;
        border: 0px;
        position: absolute;
        right: 0px;
    }
    /* 鼠标浮动按钮的样式 */
    .search_box button:hover{
        background-color: #c81623;
        cursor: pointer;
    }
    /* 放大镜样式 */
    .fdj{
        display: inline-block;
        width: 21px;
        height: 21px;
        background-image: url(img/fdj.png);
        background-size: 20px 20px;
    }
</style>

html：

<div class="search_box">
    <input type="text">
    <a href="#"><span class="pic"></span></a>
    <button>
        <i class="fdj"></i>
    </button>
</div>