CSS 下拉列表 UL LI A

Question

自从我使用 CSS 以来已经有一段时间了，只是需要一些帮助。

我正在尝试使 'Home' 主栏的高度占屏幕的 25%。虽然我认为它受到某种对齐问题的影响。

Here's the link to the source code

http://codepen.io/anon/pen/ZbbNqO?editors=110

哇，感谢您提供有用的反馈！我编辑了代码，但我还有更多 questions/errors 和修复，您可能会提供帮助。

知道为什么主菜单栏不是屏幕的宽度吗？（颜色仅供识别）还有什么办法可以同时显示菜单栏 1、2 和 3？

Answer 1

试试这个：#primary_nav_wrap {height: 25%;}

Answer 2

如果您希望高度为25%，那么：

body {
    /* ... */
    height:100vh;
}
#primary_nav_wrap {
    /* ... */
    height: 25%
}
#primary_nav_wrap>* {
    /* ... */
    height: 100%;
}

Answer 3

http://codepen.io/damianocel/pen/BooevE?editors=110

这是无论屏幕大小如何将高度设置为 25% 的方法，请注意我只设置了高度并将 "main" link 放在那里，您并不精确关于您希望整个导航系统稍后如何显示。无论哪种方式，无论如何，高度将绝对是 25%:-)

.mainwrap{ width:99%;height:500px; display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;}

Answer 4

html:

<div>
   <nav id="primary_nav_wrap">
      ...
   </nav>
</div>

css

div {
  height: 100vh;
}

或

div {
  position: absolute;
  top: 0; bottom:0; right:0; left:0;
}

并完成

nav {
  height: 25%;
}

ul, li, a {
  height: 100%;
}

CSS 下拉列表 UL LI A

CSS Dropdown UL LI A

html

css

html-lists