创建搜索栏的最佳方式是什么?
放大镜应位于左侧的文本框中,垂直居中对齐。我觉得这是一种凌乱的方式,我是靠空格' ,而放大镜不是垂直对齐的。可以使用顶部像素边距,但似乎有一种更清洁的方法。刚开始学习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>
最佳答案
您可以使用 display: flex
和 align-items: center
在 .md-form.mt-0
风格。这将使所有居中的东西垂直对齐。现在,您只需要 padding-left: 25px
关于输入风格。所以不会重叠。
请参阅下面的片段:
.md-form.mt-0{
width:500px;
display:flex;
align-items: center;
}
.material-icons.mdc-button__icon{
position:absolute;
}
.mdc-button__icon + input{
padding-left: 25px;
}
<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 : Best way to Create Search Bar with Magnify Button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57118291/