为什么我的搜索栏出现在wearg位置？

Question

单击搜索栏空白后，应出现在导航栏上。

但是，使用Chrome时，它出现在错误的位置：

它在 Firefox 上看起来正常： （但是网站的布局看起来很奇怪，不符合预期）

这是我迄今为止的尝试：

<!-- Navbar.vue -->
<template>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper">
      <div class="row">
                <!-- Logo on the left -->
                <div class="col m2">
                    <a href="#" class="brand-logo">TabletopHaven</a>
                </div>
                
                <!-- Search bar in the center -->
                <div class="col m7">
                    <form>
                        <div class="input-field center-align">
                            <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>
                </div>

                <!-- Login button on the right -->
                <div class="col m3 right-align">
                    <a class="waves-effect waves-light btn">Register/Login</a>
                </div>
            </div>
    </div>
  </nav>
  
</template>

<script>
export default {
  name: 'MainNavbar',
}
</script>

<style scoped>
.nav-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    width:100%;
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

</style>

这是小提琴代码，您可以检查它（它看起来有点不同）： https://jsfiddle.net/Lxbwv5yq/

Answer 1

我找到了解决这个问题的方法。

基本上你需要更改搜索栏的高度，因为它太大并且与其他容器重叠