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

这里的问题是，导航列在彼此之下：

关于
摄影
DESIGN

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

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

Codepen Demo（只需将display:inline;设为.container > nav > section即可查看我不想要的内容）

Answer 1

不是display:inline;，而是float:left;。 Check THE DEMO。
您的代码应该类似于：

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

Answer 2

我在这里使用inline-block，因为它提供了比浮动项更多的灵活性。一个怪癖是你需要删除你的部分之间的任何空白。您还可以使用vertical-align更改框的垂直对齐：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;
}

导航中断显示：内联

2 个答案: