如何让 div 对齐并保持不变？

Question

当我在移动视图中切换导航栏上的菜单图标时，我无法让 'work' 和 'contact' 链接在名称下方对齐并保持不动。我的目标是 .topnav.responsive #nav-bar ul in media queries 似乎正在移动它，但无法弄清楚使用什么属性使其在 'name' 菜单下对齐图标已打开。

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

.topnav {
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 5;
  padding-top: 20px;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 16px;
  line-height: 19px;
  text-decoration: none;
  font-size: 18px;
}

.topnav .icon {
  display: none;
}

ul {
  margin:0;
  padding-top: -80;
}

#nav-bar {
    float: right;
}

.nav-link a {
    list-style-type: none;
    text-decoration: none;
    color: black;
}

#nav-bar li {
    display: inline-block;
    margin-right: 20px;
    line-height: 80px;
  margin-top: -2px;
}

#work {
  margin-right: -5px;
}

@media screen and (max-width: 500px) {
  #nav-bar ul {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    margin-right: 10px;
    margin-top: -2px;
  }
}

@media screen and (max-width: 500px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0px;
    top: 20px;
  }
  .topnav.responsive #nav-bar ul {
    float: left;
    display: block;
    position: relative;
    right: 300px;
    top: 20px;
    text-align: left;
    padding-left: 20px;
  }
  .topnav a {
    padding:20px;
  }
  
  #nav-bar li {
    display:block;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    

<div class="topnav" id="myTopnav">
      <a href="home.html" class="active">NAME</a>
  <div id="nav-bar">
                <ul>
                    <li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
                    <li style="list-style-type: none;" class="nav-link"><a href="#">CONTACT</a></li>
                </ul>
            </div>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>

Answer 1

不要使用浮动，它们只是有点难以控制，请改用 flex。

我做了一些更改，删除了一些不必要的代码，以使其简单易懂。

我不会解释每个属性都在做什么，这会花一整晚的时间，我敢肯定你对大部分内容都很熟悉，但是如果你有任何问题，请尽管问。

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.topnav {
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 5;
  display: flex;
}

.topnav a {
  display: block;
  color: black;
  text-align: center;
  padding: 16px;
  line-height: 19px;
  text-decoration: none;
  font-size: 18px;
}

.topnav .icon {
  display: none;
}

ul {
  display: flex;
  margin-left: auto;
}

@media screen and (max-width: 500px) {
  .topnav>ul {
    display: none;
  }
  .topnav a.icon {
    display: block;
    position: absolute;
    right: 0;
  }
  .topnav.responsive {
    flex-direction: column;
    align-items: flex-start;
  }
  .topnav.responsive>ul {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .topnav a {
    text-align: left;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="home.html" class="active">NAME</a>

  <ul>
    <li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
    <li style="list-style-type: none;" class="nav-link"><a href="#">CONTACT</a></li>
  </ul>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

如何让 div 对齐并保持不变？

How to get div to align and stay put?

html

css

media-queries