html - HTML CSS:使用放大按钮创建搜索栏的最佳方式
问题描述
创建搜索栏的最佳方式是什么?
放大镜应位于左侧的文本框中,垂直居中对齐。我觉得这是一种凌乱的方式,我是靠空格' ,而放大镜不是垂直对齐的。可以使用顶部像素边距,但似乎有一种更清洁的方法。刚开始学习html和css。不喜欢使用像素测量和空间,听说这不是一个好习惯。
.md-form.mt-0{
display:inline-flex;
width:500px;
}
.material-icons.mdc-button__icon{
position:absolute;
top:7px;
left: 2px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="md-form mt-0">
<i class="material-icons mdc-button__icon">search</i>
<input class="form-control" type="text" placeholder=" Search" aria-label="Search">
</div>
解决方案
这是我的解决方案。仅限 HTML 和 CSS。放大镜是免费使用的引导 SVG。运行代码片段以查看结果。
.svgWrapper{
position:absolute;
top:21px;
left:15px;
}
.searchBox{
text-indent:30px;
margin-top:10px;
width:200px
}
<html>
<div class="search">
<div class="svgWrapper">
<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip- rule="evenodd"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip- rule="evenodd"/>
</svg>
</div>
<input class='searchBox'type="search" placeholder="Search the web"results="0" />
</div>
</html>
推荐阅读
- machine-learning - 如何确定销售预测的预测模型
- javascript - 捕获自动填充的文本框值并回显
- javascript - Javascript位置散列到php变量中
- c++ - C++ 函数返回问题
- django - 如何修复 django rest 框架元类冲突
- ios - Swift 3:您可以保存裁剪图像的位置并在显示完整图像时访问它吗?
- javascript - 光滑的滑块 - 悬停时暂停并在鼠标离开时播放剩余的秒数
- java - 在 Android 中显示州名以及纬度和经度
- .htaccess - 将 .htaccess 添加到 Cordova
- api - 如何在不使用 API Gateway 的情况下使用 AWS Cognito 进行自定义 Spring REST API 授权