按钮怎么嵌套一个搜索按钮
时间: 2024-04-30 09:19:43 浏览: 15
您可以使用HTML和CSS来创建嵌套搜索按钮。以下是一个示例代码:
```html
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
```
```css
.search-container {
display: inline-block;
position: relative;
}
input[type="text"] {
padding: 10px;
border: none;
border-bottom: 2px solid #ddd;
}
button[type="submit"] {
position: absolute;
top: 0;
right: 0;
background-color: transparent;
border: none;
outline: none;
}
.fa-search {
font-size: 20px;
color: #999;
}
```
在这个示例中,我们创建了一个名为 `search-container` 的容器,里面包含一个输入框和一个搜索按钮。搜索按钮是一个 `<button>` 元素,里面包含一个 FontAwesome 图标,用来显示搜索图标。我们使用 CSS 中的 `position: relative` 来使容器相对定位,并使用 `position: absolute` 将搜索按钮放置在容器的右上角。
您可以根据自己的需要修改代码,以适应您的网站或应用程序的风格。