使用 flexbox 看不到文本内容

Question

请看一下代码示例

我正在尝试呈现一个汉堡包图标和一个菜单，当用户将鼠标悬停在菜单图标上时会出现该菜单。 令人惊讶的是，虽然您可以看到菜单，但文本却不见了。

虽然，如果我从.menu删除display: flex ，一切似乎都正常。 我不确定 flexbox 如何影响文本内容。

 /* Author: Rahul Shetty */ body { font-size: 16px; font-family: "Roboto", sans-serif; box-sizing: border-box; } body *, body *::after, body *::before { box-sizing: border-box; } a { text-decoration: none; } /* ----------------------------------------------------------------------------------------- */ /* Header */ /* ----------------------------------------------------------------------------------------- */ header { display: flex; box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1); position: fixed; top: 0; left: 0; width: 100%; background-color: #fafafb; transition: box-shadow cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s; height: 50px; box-sizing: border-box; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; border-top: 3px solid #f48024; } .logo-hamburger { display: flex; } .menu { width: 44px; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .menu:hover { background-color: #eff0f1; } .hamburger-icon { display: block; width: 18px; height: 2px; position: relative; background-color: #848d95; } .hamburger-icon::after, .hamburger-icon::before { position: absolute; content: ""; width: 18px; height: 2px; left: 0; background: #848d95; top: -5px; transition: all ease-in-out 0.1s; } .hamburger-icon::after { top: 5px; } .hambuger-menu { width: 240px; display: none; top: 47px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; color: #2f3337; background-color: #fff; box-shadow: 0 2px 2px rgba(12, 13, 14, 0.2); z-index: 999; position: absolute; text-align: left; border-left: 1px solid #e4e6e8; border-right: 1px solid #e4e6e8; border-bottom: 1px solid #e4e6e8; } .menu:hover .hambuger-menu { display: block; } /* ----------------------------------------------------------------------------------------- */ /* Main */ /* ----------------------------------------------------------------------------------------- */ main { padding-top: 50px; } .block-title { font-family: "Roboto Slab", serif; } /* ----------------------------------------------------------------------------------------- */ /* Footer */ /* ----------------------------------------------------------------------------------------- */

 <header> <div class="logo-hamburger"> <div class="menu"> <span class="hamburger-icon"></span> <nav class="hambuger-menu"> <ul> <li class="menu-item"><a href="#" class="menu-link">Home</a></li> <li class="menu-item"> <a href="#" class="menu-link">Public</a> </li> <li class="menu-item"><a href="#" class="menu-link">Teams</a></li> </ul> </nav> </div> <a href="#" class="logo-link">Stack Overflow</a> </div> </header>

Answer 1

请尝试使用此代码。

 /* Author: Rahul Shetty */ body { font-size: 16px; font-family: "Roboto", sans-serif; box-sizing: border-box; } body *, body *::after, body *::before { box-sizing: border-box; } a { text-decoration: none; } /* ----------------------------------------------------------------------------------------- */ /* Header */ /* ----------------------------------------------------------------------------------------- */ header { display: flex; box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1); position: fixed; top: 0; left: 0; width: 100%; background-color: #fafafb; transition: box-shadow cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s; height: 50px; box-sizing: border-box; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; border-top: 3px solid #f48024; } .logo-hamburger { display: flex; } .menu { width: 44px; height: 100%; display: flex; justify-content: center; cursor: pointer; position: relative; flex-direction: column; -webkit-flex-direction: column; } .menu:hover { background-color: #eff0f1; } .hamburger-icon { display: block; width: 18px; height: 2px; position: relative; background-color: #848d95; align-self: center; } .hamburger-icon::after, .hamburger-icon::before { position: absolute; content: ""; width: 18px; height: 2px; left: 0; background: #848d95; top: -5px; transition: all ease-in-out 0.1s; } .hamburger-icon::after { top: 5px; } .hambuger-menu { width: 240px; display: none; top: 47px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; color: #2f3337; background-color: #fff; box-shadow: 0 2px 2px rgba(12, 13, 14, 0.2); z-index: 999; position: absolute; text-align: left; border-left: 1px solid #e4e6e8; border-right: 1px solid #e4e6e8; border-bottom: 1px solid #e4e6e8; } .menu:hover .hambuger-menu { display: block; } /* ----------------------------------------------------------------------------------------- */ /* Main */ /* ----------------------------------------------------------------------------------------- */ main { padding-top: 50px; } .block-title { font-family: "Roboto Slab", serif; } /* ----------------------------------------------------------------------------------------- */ /* Footer */ /* ----------------------------------------------------------------------------------------- */

 <header> <div class="logo-hamburger"> <div class="menu"> <span class="hamburger-icon"></span> <nav class="hambuger-menu"> <ul> <li class="menu-item"><a href="#" class="menu-link">Home</a></li> <li class="menu-item"> <a href="#" class="menu-link">Public</a> </li> <li class="menu-item"><a href="#" class="menu-link">Teams</a></li> </ul> </nav> </div> <a href="#" class="logo-link">Stack Overflow</a> </div> </header>