导航因显示:内联而中断

Question

我有以下HTML标记用于我的全屏导航：

<div class="container">
  <nav>
    <section class="navabout">
      ABOUT
    </section>
    <section class="navphotography">
      PHOTOGRAPHY
    </section>
    <section class="navdesign">
      DESIGN
    </section>
  </nav>
</div>

我的导航的 CSS 是：

.container > nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.container > nav > section{
    width: 33%;
    height: 100%;
  display:inline;  <-- makes the fault!!!
}
.container > nav > section.navabout{
    background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center; 
  background-size: cover;
}
.container > nav > section.navphotography{
    background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center; 
  background-size: cover;
}
.container > nav > section.navdesign{
    background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center; 
  background-size: cover;
}

这里的问题是，导航像这样列在彼此下面：

• 大约
• 摄影
• 设计

因为我将一个元素的高度设置为 100%，所以我看不到其他两个元素。
因此，为了进行水平列表顺序，我将display:inline;设置为.container > nav > section部分。它可以工作，但列表元素将不再是高度 100%。

那么我怎样才能实现我的目标呢？

Codepen Demo（只需将display:inline;设置为.container > nav > section，看看我不想拥有的内容）

Answer 1

与其做display:inline;，不如做float:left;。检查演示。
您的代码应如下所示：

.container > nav > section{
    width: 33%;
    height: 100%;
    float: left;
}

Answer 2

我会在这里使用内联块，因为它提供了比浮动项目更多的灵活性。一个怪癖是您需要删除部分之间的任何空格。您还可以执行一些操作，例如使用垂直对齐更改框的垂直对齐方式：top|middle|bottom|....更多选择

<div class="container">
  <nav>
    <section class="navabout">
      ABOUT
    </section><section class="navphotography">
      PHOTOGRAPHY
    </section><section class="navdesign">
      DESIGN
    </section>
  </nav>
</div>

.container > nav > section {
    width: 33%;
    height: 100%;
    display: inline-block;
}

如果您使用的是 nav 元素，只需确保您在其中有一些标签，否则浏览器不会将其理解为导航元素。如果所有的盒子

<div class="container">
  <nav>
    <a href="somewhere" class="navabout">
      ABOUT
    </a><a href="somewhere-else" class="navphotography">
      PHOTOGRAPHY
    </a><a href="another-link" class="navdesign">
      DESIGN
    </a>
  </nav>
</div>

.container > nav > a {
    width: 33%;
    height: 100%;
    display: inline-block;
}