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;
}

link 关于弹性布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

materializecss search bar is not working properly in chrome

html

css

materialize

twitter-bootstrap

bootstrap-4

Firefox 截图：

Chrome截图：

HTML代码：