Materialise CSS Navbar Search 坏了

Posted 2023-02-22

【中文标题】Materialise CSS Navbar Search 坏了

【英文标题】：Materialize CSS Navbar Search is broken

【发布时间】：2016-08-17 23:04:20

【问题描述】：

使用以下任一版本的 chrome 50+ 上的导航栏搜索被破坏：

实现 0.97.6 实现 0.97.5

使用的代码如文档中所述：

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

此代码会导致文档页面和我的网站上描述的视觉问题：

http://materializecss.com/navbar.html

如何解决这个问题以使其看起来统一？

【问题讨论】：

你指的是materializecss.com上的那个吗？我觉得很好。

您使用的是什么版本的 materializeCSS？发布您当前的代码以尝试重现错误。请在此处了解如何在 *** 上发布有用的问题：***.com/help/how-to-ask

@Sami -- 你在 chrome 50+ 上吗？

【参考方案1】：

好的，我遇到了同样的问题。但是，我添加了这个 CSS，它对我有用。

nav .nav-wrapper form, nav .nav-wrapper form .input-field
height: 100%;

【讨论】：

谢谢！这也为我解决了这个问题，尽管我的两个导航搜索栏都使用了静态 px 高度.. 一个较小的在标题中，一个较大的在主页上。有趣的是我解决了它然后记得我应该检查 *** 的答案:)

编码愉快！

【参考方案2】：

我今天才注意到这一点，我只是这样做了：

input[type="search"] 
  height: 64px !important; /* or height of nav */