为什么我的导航栏看起来是浮动的？

Question

我想在视口底部制作一个固定的导航栏，分为两部分。左侧是网站其余部分的链接，右侧是指向外部资源的链接。我想让所有东西都水平和垂直居中并且响应迅速。对于我尝试过的每个解决方案，导航栏的高度、对齐方式或大小都略有偏差。

如果我将内容 div 设置为 90% 并将导航栏 div 设置为 10%，那么它 "works" 并且所有内容都正确对齐，但我希望导航栏是稍微薄一点。

如您所见，我为 nav div 设置了边框，它基本上是浮动的，我不知道为什么。

我看过一些类似的问题，但很多答案似乎都指向使用浮点数等的过时解决方案

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}
.page {
  height: 100%;
}
.main-content {
  height: 90%;
  max-width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-left {
  text-align: center;
  padding: 20px;
}
.nav {
  border: 1px solid blue;
  height: 5%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-left {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 10vh;
}
.nav-right {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 10vh;
}
.nav ul {
  padding: 0;
  margin: 0;
  display: inline-block;
}
.nav li {
  display: inline-block;
  text-align: center;
}
.nav a {
  color: black;
}
.nav a:link {
  text-decoration: none;
}
.nav a:visited {
  text-decoration: none;
}
.nav a:hover {
  text-decoration: none;
  color: gray;
}
.nav a:active {
  text-decoration: none;
}
img {
  border-radius: 50%;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/383177a704.js"></script>
  <title>Alex Wilson - Man, Web Designer, Legend</title>
</head>

<body>

  <div class="page">

    <div class="main-content">

      <div class="main-left">
        <img src="http://i.imgur.com/IMIKhWA.jpg"></img>
      </div>
      <div class="main-right">
        <h1>About me</h1>
        <p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
          be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
      </div>
    </div>

    <div class="nav">

      <div class="nav-left">
        <ul>
          <li><a href="Home.html">Home</a>
          </li>
          <li><a href="About.html">About</a>
          </li>
          <li><a href="work.html">Work</a>
          </li>
        </ul>
      </div>

      <div class="nav-right">
        <ul class="list-right">
          <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
          </li>
          <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>

    </div>

  </div>

</body>

这是 CodePen。

Answer 1

所以我对你的代码做了一些事情：

也将您的 page 元素设为 flexbox：

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

并删除了 main-content 和 nav 的高度，以及 main-content 的 max-width（最好根据像素设置它内容而不是我猜的百分比）。
为了使导航栏稍微变薄，也许您可以为nav-left 或nav-right 减少line-height。
还添加了flex: 0 0 auto使得nav在视口高度较小时不会收缩太多（因为line-height of nav 在视口像素中）。

参见下面的演示：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  /*height: 90%;*/
  /*max-width: 70%;*/
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-left {
  text-align: center;
  padding: 20px;
}

.nav {
  border: 1px solid blue;
  /*height: 10%;*/
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto; /* addded */
}

.nav-left {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 5vh;
}

.nav-right {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 5vh;
}

.nav ul {
  padding: 0;
  margin: 0;
  display: inline-block;
}

.nav li {
  display: inline-block;
  text-align: center;
}

.nav a {
  color: black;
}

.nav a:link {
  text-decoration: none;
}

.nav a:visited {
  text-decoration: none;
}

.nav a:hover {
  text-decoration: none;
  color: gray;
}

.nav a:active {
  text-decoration: none;
}

img {
  border-radius: 50%;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>

<div class="page">
  <div class="main-content">
    <div class="main-left">
      <img src="http://i.imgur.com/IMIKhWA.jpg"></img>
    </div>
    <div class="main-right">
      <h1>About me</h1>
      <p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
        be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
    </div>
  </div>

  <div class="nav">

    <div class="nav-left">
      <ul>
        <li><a href="Home.html">Home</a>
        </li>
        <li><a href="About.html">About</a>
        </li>
        <li><a href="work.html">Work</a>
        </li>
      </ul>
    </div>

    <div class="nav-right">
      <ul class="list-right">
        <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </div>

为什么我的导航栏看起来是浮动的？

Why does my navbar appear to be floating?

html

css

flexbox

responsive