Question

我正在尝试创建自己的响应式导航栏，有人可以解释为什么会发生这种情况，为什么我的导航消失了。当我把它调整到一定的大小它就消失了，但令我困惑的是溢出隐藏的属性，因为有它它工作正常，我不知道为什么...有人可以解释这个给我这里是代码

＆＃13;

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar a {
  display: block;
  float: left;
  font-size: 17px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  padding: 15px;
}

.icon {
  width: 30px;
  height: 4px;
  margin: 6px 0px;
  background-color: #FFFFFF;
}

.navbar a.toggle {
  display: none;
}

@media screen and (max-width: 500px) {
  .navbar a {
    display: none;
  }
  .navbar a.toggle {
    float: right;
    display: block;
    padding: 5px;
  }
}

＆＃13;

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="javascript:void(0)" class="toggle" onclick="myFunc()">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>

  </a>

</div>

＆＃13;

Answer 1

您没有提到高度添加高度将解决您的问题。

＆＃13;

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="javascript:void(0)" class="toggle" onclick="myFunc()">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </a>
</div>

＆＃13;

PackageManager packageManager = this.getPackageManager();
int permission = packageManager.checkPermission("android.permission.CAMERA", "your packageName");
if (PackageManager.PERMISSION_GRANTED == permission) {
   // you can do something
} else {
   // request permission
}

＆＃13;

Answer 2

使用flexbox的替代方案

＆＃13;

scala> spark.read.option("multiLine", true).json("jsonFile.json").printSchema
root
 |-- lang: array (nullable = true)
 |    |-- element: array (containsNull = true)
 |    |    |-- element: string (containsNull = true)

＆＃13;

.navbar {
  background-color: #333;
  display: flex;
}

.navbar a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  padding: 15px;
}

.icon {
  width: 30px;
  height: 4px;
  margin: 6px 0px;
  background-color: #FFFFFF;
}

.navbar a.toggle {
  display: none;
}

@media screen and (max-width: 500px) {
  .navbar a {
    display: none;
  }
  .navbar a.toggle {
    margin-left: auto;
    display: block;
    padding: 5px;
  }
}

＆＃13;

当我从导航栏中删除overflow：hidden属性时，它会消失

2 个答案: