对于全屏导航，我具有以下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零件。它可以工作，但是list元素不再是100％高。
那我怎样才能实现我的目标呢？
Codepen演示（只需设置display:inline;来.container > nav > section看看有什么我不希望有）
而不是做display:inline;，做float:left;。检查DEMO。
您的代码应类似于：
.container > nav > section{
width: 33%;
height: 100%;
float: left;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句