<div class="gs-search"> <img src="../assets/logo.png" alt="logo" style="width: 100px; height: 100px;"> <input class="gs-search-input" type="text" placeholder="请输入书名"> <span class="gs-search-btn">搜 索</span> </div>编写一个style,让搜索框靠网页右边,简略美化一下界面
时间: 2023-10-09 17:10:17 浏览: 96
vue.js轮播图组件使用方法详解
可以尝试使用以下样式实现:
```css
.gs-search {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 20px;
}
.gs-search-input {
margin-right: 10px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
padding: 5px;
outline: none;
}
.gs-search-btn {
color: #fff;
background-color: #007bff;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
```
这个样式将搜索框和搜索按钮都向右对齐,并且简化了搜索框的样式。你可以根据自己的需求调整样式,让界面看起来更美观。
阅读全文