javascript - 响应时如何更改topnav中的Awesome Icons位置

Question

我的菜单目前的样子: what it looks like now我想要的是: What i want当我调整我的窗口屏幕大小时，菜单按钮/链接开始移动到另一行时，我添加了一个媒体查询以使其全部集中在一个按钮中。当您单击该按钮时，所有菜单选项都会显示。我需要帮助来对齐很棒的图标和网站链接，这样它就不会占用那么多空间。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.topnav {
  text-align: center;
  overflow: hidden;
  background-color: #63757a;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 20px 20px;
}

.topnav a:hover {
  opacity: 0.699999988079071044921875;
  color: black;
  text-decoration: underline;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width:1300px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width:1300px) {
  .topnav.responsive {
    position: fixed;
    z-index: 1000000;
    height: 100%;
    overflow: scroll;
    width: 100%;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="topnav" id="myTopnav">
  <a href="https://www.havardpettersen.life/index.html" title="hjem">Home</a>
  <a href="https://www.havardpettersen.life/media.html" title="Media">Media</a>
  <a href="https://www.havardpettersen.life/gallery.html" title="Bilder">Bilder</a>
  <a href="https://www.havardpettersen.life/trening.html" title="trening">Trening</a>
  <a href="https://www.havardpettersen.life/kontakt.html" title="kontakt meg">Kontakt meg</a>
  <a href="https://www.havardpettersen.life/registration.php" title="registrer deg">Registrer deg</a>
  <a href="https://www.havardpettersen.life/login.php" title="login her">Logg inn</a>
  <a href="https://www.havardpettersen.life/dashboard.php" title="ditt dashboard">Dashboard</a>
  <a href="https://www.havardpettersen.life/skole.html" title="se skole siden min">Skole</a>
  <a href="https://calendar.google.com/calendar/embed?src=therealsirwerty%40gmail.com&ctz=Europe%2FOslo" title="åpne kalender på ny side">Kalender</a>
  <a href="https://www.facebook.com/sirwerty" title="facebook" class="fa fa-facebook"></a>
  <a href="https://twitter.com/hvardpettersen1" title="twitter" class="fa fa-twitter"></a>
  <a href="https://www.youtube.com/user/oldwildybck" title="youtube" class="fa fa-youtube"></a>
  <a href="https://www.instagram.com/realsirwerty/" title="instagram" class="fa fa-instagram"></a>
  <a href="https://www.snapchat.com/add/havard.boy" title="snapchat" class="fa fa-snapchat-ghost"></a>
  <a href="https://www.reddit.com/user/Sir_Werty/" title="reddit" class="fa fa-reddit"></a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Answer 1

如果你想让你的唯一图标连续出现，试试这个 css

.topnav.responsive a[class*=fa] {
  display: inline-block;
}

它将定位所有类名包含fa子字符串的 anchor 标签

堆栈片段

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.topnav {
  text-align: center;
  overflow: hidden;
  background-color: #63757a;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 20px 20px;
}

.topnav a:hover {
  opacity: 0.699999988079071044921875;
  color: black;
  text-decoration: underline;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width:1300px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav.responsive a[class*=fa] {
    display: inline-block;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width:1300px) {
  .topnav.responsive {
    position: fixed;
    z-index: 1000000;
    height: 100%;
    overflow: scroll;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="topnav" id="myTopnav">
  <a href="https://www.havardpettersen.life/index.html" title="hjem">Home</a>
  <a href="https://www.havardpettersen.life/media.html" title="Media">Media</a>
  <a href="https://www.havardpettersen.life/gallery.html" title="Bilder">Bilder</a>
  <a href="https://www.havardpettersen.life/trening.html" title="trening">Trening</a>
  <a href="https://www.havardpettersen.life/kontakt.html" title="kontakt meg">Kontakt meg</a>
  <a href="https://www.havardpettersen.life/registration.php" title="registrer deg">Registrer deg</a>
  <a href="https://www.havardpettersen.life/login.php" title="login her">Logg inn</a>
  <a href="https://www.havardpettersen.life/dashboard.php" title="ditt dashboard">Dashboard</a>
  <a href="https://www.havardpettersen.life/skole.html" title="se skole siden min">Skole</a>
  <a href="https://calendar.google.com/calendar/embed?src=therealsirwerty%40gmail.com&ctz=Europe%2FOslo" title="åpne kalender på ny side">Kalender</a>
  <a href="https://www.facebook.com/sirwerty" title="facebook" class="fa fa-facebook"></a>
  <a href="https://twitter.com/hvardpettersen1" title="twitter" class="fa fa-twitter"></a>
  <a href="https://www.youtube.com/user/oldwildybck" title="youtube" class="fa fa-youtube"></a>
  <a href="https://www.instagram.com/realsirwerty/" title="instagram" class="fa fa-instagram"></a>
  <a href="https://www.snapchat.com/add/havard.boy" title="snapchat" class="fa fa-snapchat-ghost"></a>
  <a href="https://www.reddit.com/user/Sir_Werty/" title="reddit" class="fa fa-reddit"></a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>