materializecss搜索栏在chrome中无法正常工作

Question

我一直使用Materializecss创建网站的设计，但在Firefox中没有问题，直到我再次在Chrome中对其进行了检查。

好吧，除了搜索栏，其他所有东西都工作正常，我使用的是文档中提到的导航栏，因此我猜代码没有什么问题，并且可以在Firefox中使用。

Firefox屏幕截图：

Chrome屏幕截图：

HTML代码：

  <form class="hide-on-med-and-down">
    <div class="input-field">
      <input id="search" type="search" required>
      <label class="label-icon" for="search"><i class="material-icons">search</i></label>
      <i class="material-icons">close</i>
    </div>
  </form>

我确实将搜索栏的CSS更改为此（我在这里找到了解决类似问题的方法）：

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

Answer 1

css：

.nav-wrapper {
  width:100%;
  background:blue;
  /* this will automatically make the items it contains stretch verically */
  display:flex; 
  justify-content:space-between;
}

/* the form is in your float right unordered list (ul) so add this to fix the chrome layout issue */
.nav-wrapper ul[class="right"] {
  display:flex;
}

form {
  /* don't let the blue bleed through */
  background:white;
}

 /* if you want it to be responsive pick your number and add this css */
@media only screen and (max-width: 480px) {
  flex-direction:column;
}

有关弹性版式的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/