HTML CSS：使用放大按钮创建搜索栏的最佳方式答案

【问题标题】：HTML CSS: Best way to Create Search Bar with Magnify ButtonHTML CSS：使用放大按钮创建搜索栏的最佳方式
【发布时间】：2019-07-19 18:59:24
【问题描述】：

创建搜索栏的最佳方式是什么？

放大镜应位于左侧文本框内，垂直居中对齐。我觉得这是一种凌乱的方式，我依靠空格'&nbsp，并且放大镜不是垂直对齐的。可以使用顶部像素边距，但似乎有一种更清洁的方法。刚开始学习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="&nbsp;&nbsp;&nbsp;Search" aria-label="Search">
</div>

【问题讨论】：

标签： html css twitter-bootstrap material-design

【解决方案1】：

您可以在.md-form.mt-0 样式上使用display: flex 和align-items: center。这将使所有居中的东西垂直对齐。现在，您只需要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>

【讨论】：

【解决方案2】：

这是我的解决方案。仅限 HTML 和 CSS。放大镜是免费使用的引导 SVG。运行代码 sn -p 以查看结果。

.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>

【讨论】：

当您水平滚动代码时，您会看到大量空白区域。不知道为什么？
这就是它的粘贴方式。您可以统一这些差距

【解决方案3】：

您可以使用 Bootstrap 的默认 .input-group (https://getbootstrap.com/docs/4.3/components/input-group/)

如果输入的背景颜色困扰您，您可以根据需要进行调整。

另外，如果你愿意，你也可以尝试去掉分隔它们的边界，但我认为没有必要。

查看下面的演示代码

.input-group .input-group-text {
  background-color: #fff;
}

/* if you wish */
.input-group input.form-control{
  border-left-color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
       <i class="material-icons mdc-button__icon">search</i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
</div>

【讨论】：

【解决方案4】：

试试这个：https://jsfiddle.net/wwWaldi/3972kghm/5/

   .md-form.mt-0{
      display:inline-flex;
      width:500px;
    }
    .md-form.mt-0 input{
      padding-left: 25px;
    }
    .material-icons.mdc-button__icon{
      position:absolute;
      top:7px;
      left: 2px;

    }

【讨论】：

这个答案很接近我，我试图避免像素测量
请解释您的答案以及它如何解决 OP 的问题，包括您的答案中的完整代码示例，而不是在第三方网站上。
避免像素测量，为什么？你在正确的轨道上，只是不要使用不间断的空格，当涉及到伪造这些东西时，你可以通过像素测量。
嗨@WaldirBolanos 谢谢，不知道是这样，认为弹性容器和自然间距，垂直对齐中心等是最好的方法，
是的，你肯定可以更喜欢它，但是当涉及到填充以将文本推到一边为图标腾出空间时，像素测量是要走的路，因为它们不会像不间断的空间会。看看这个例子：colorlib.com/etc/searchf/colorlib-search-6 看起来很花哨不是吗？好吧，输入有一个padding: 10px 32px 10px 70px; 的填充，以便为图标在左侧腾出空间。