当将位置绝对是IE中的子元素之一时，CSS3 Flex-Box的行为方式有所不同

我正在尝试使用flex-box创建导航。我想要 menu和 logo1左右，右logo2。

我添加了Jusify-content：之间是在菜单，徽标和徽标之间添加空间

在Chrome中，我的代码工作正常，但是在IE11中，它在menu和logo1

之间添加了额外的空间

这是我的代码

/* Styles go here */
.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 50px;
}
.menu {
  position: absolute;
  left:0;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div class="nav">
      <button type="button" class="menu">menu</button>
      <a href="logo1"  class="logo1">logo1</a>
      <a href="logo2"  class="logo2">logo2</a>
    </div>
  </body>
</html>

卸下填充和定位，并给予logo2 A margin-left:auto

/* Styles go here */
.nav {
  display: flex;
  justify-content: space-between;
}
.logo2 {
  margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div class="nav">
    <button type="button" class="menu">menu</button>
    <a href="logo1" class="logo1">logo1</a>
    <a href="logo2" class="logo2">logo2</a>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：