输入框和搜索按钮组合

您可能需要做一个站内搜索，搜索页面是输入框和搜索按钮的组合，即类似于百度搜索页面的效果。

1.最终效果

2. 实现方法

html 内容如下:

<div class="search">
    <input class="search-input"></input>
    <button class="search-btn">搜索</button>
</div>

css 样式如下:

.search {
    margin: 50px 0px;
}

/*设置输入框样式*/
.search-input {
    border:2px solid gray;
    outline:none;
    font:14px/30px "microsoft yahei";
    padding-left: 10px;
    width: 80%;
}

.search-btn:hover {
    background-color: gray
}

/*设置按钮样式*/
.search-btn {
    background:darkgray;
    color:white;
    border:none;
    outline:none;
    font:14px/34px "microsoft yahei";
}