Css 导航因显示：inline而中断

我的全屏导航有以下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;
}

.container>nav{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.集装箱>导航>区段{
宽度：33%；
身高：100%；
显示：内联；导航>section.navabout{
背景：url(http://eofdreams.com/data_images/dreams/face/face-01.jpg)无重复中心；
背景尺寸：封面；
}
.container>nav>section.nav{
背景：url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg)无重复中心；
背景尺寸：封面；
}
.container>nav>section.navdesign{
背景：url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg)无重复中心；
背景尺寸：封面；
}

这里的问题是，导航列在彼此下面，如下所示：

• 关于
• 摄影
• 设计

因为我将一个元素的高度设置为100%，所以我看不到其他两个元素。
因此，为了建立一个水平列表顺序，我将

display:inline；

设置为

.container>nav>部分。它可以工作，但列表元素不再是100%高度

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

（只需将
display:inline；
设置为
.container>nav>部分
，查看我不想要的内容）
而不是执行
display:inline；
，执行
浮动：左；
。

您的代码应该如下所示：

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

我会在这里使用内联块，因为它比浮动项提供了更多的灵活性。一个怪癖是你需要删除分区之间的任何空白。你也可以使用垂直对齐：顶部|中间|底部|更改框的垂直对齐……更多选项

<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;
}


关于
摄影
设计
.集装箱>导航>区段{
宽度：33%；
身高：100%；
显示：内联块；
}

如果您使用的是nav元素，请确保其中包含一些a标记，否则浏览器不会将其理解为用于导航的元素。如果所有框

<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;
}


.集装箱>导航>a{
宽度：33%；
身高：100%；
显示：内联块；
}
尝试display:inline block；+1以获得关于inline block的有用答案。第一：为什么这比float:left更灵活？第二：但我不想有链接。因为我只触发了一些jQuery元素。我也不想更改URL…什么是“理解为导航元素”。因此screenreader（例如）看不出这是导航？+1。@LongJohn:
display:inline block；
是更好的解决方案！看看这个答案（）这些解决方案之间的差异和可能性。嗨，John，我不确定屏幕阅读器是否会将导航块中的部分理解为导航元素。我可能错了，但我认为他们将标记理解为链接，您可能可以使用ARIA链接，但我不是专家。至于内联块，它的行为往往是而且不太可能做任何奇怪的事情，你可以玩垂直对齐。