我无法使用materializecss在导航栏上保留带有徽标和登录用户名的所有ul / li列表？有6个导航带有一个带有用户名的徽标，我想保留在导航栏上，但是，我无法将所有这些保留在导航栏上。导航文本和用户名出现在导航栏的下方。下面是html代码的一部分。
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<a href="" class="brand-logo"> <img style="height: 56px;width: 70px;" src="<?php echo base_url(); ?>assets/images/Pratham-1.png"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons menu">menu</i></a>
<ul class="right hide-on-med-and-down">
<!-- <li><a href=""> <?php echo $name;?></a></li>
<li><a href="<?php echo base_url(); ?>index.php/login/logout">Logout</a></li> -->
<li><a class="dropdown-button" href="#!" data-activates="basicinfo"><i class="material-icons left">language</i>Basic Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="learningresults"><i class="material-icons left">show_chart</i>Learning Results<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="attendance"><i class="material-icons left">supervisor_account</i>Attendance<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="monitoringinformation"><i class="material-icons left">search</i>Monitoring Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="others"><i class="material-icons left">speaker_notes</i>Others<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a href="#!"><i class="material-icons left">vertical_align_bottom</i>Download Data</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><?php echo $name;?><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!-- Dropdown for Baisc Info large screen-->
<ul id="basicinfo" class="dropdown-content">
<li><a href="#!">Reach 2016-17</a></li>
<li class="divider"></li>
<li><a href="#!">What is Read? India</a></li>
<li><a href="#!">Tools & MME Formats</a></li>
<li><a href="#!">Implementation models</a></li>
<li><a href="#!">Archives</a></li>
</ul>
<!-- Dropdown for Learnign Levels large screen-->
<ul id="learningresults" class="dropdown-content">
<li><a href="#!">Camp-wise Results</a></li>
<li><a href="#!">Jumps Across Reading Levels</a></li>
<li><a href="#!">Know Your Progress</a></li>
<li><a href="#!">Comparison Reports</a></li>
<li><a href="#!">Goal Tracker</a></li>
</ul>
CSS - 到目前为止，我已尝试过这个，到目前为止我已尝试过这个 -
nav {
height: 120px;
line-height: 90px;
font-size: 12px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
/*height: 30px;
line-height: 30px;*/
}
nav .button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
nav .brand-logo {
font-size: 1.6rem;
}
@media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
}
nav a:hover {
color: blue;
/* text-decoration: underline;*/
}
答案 0 :(得分：0)
我认为这是UI / UX设计的一个问题。我认为这在桌面上看起来最适合side-nav已修复。
以下是Materialise文档中的一个示例，无需更改CSS：
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
<li class="search">
<div class="search-wrapper card">
<input id="search"><i class="material-icons">search</i>
<div class="search-results"></div>
</div>
</li>
<li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
<li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
<div class="collapsible-body">
<ul>
<li><a href="color.html">Color</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="media-css.html">Media</a></li>
<li><a href="sass.html">Sass</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="table.html">Table</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
<div class="collapsible-body">
<ul>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="chips.html">Chips</a></li>
<li><a href="collections.html">Collections</a></li>
<li><a href="footer.html">Footer</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="icons.html">Icons</a></li>
<li class="active"><a href="navbar.html">Navbar</a></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="preloader.html">Preloader</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<li><a href="carousel.html">Carousel</a></li>
<li><a href="collapsible.html">Collapsible</a></li>
<li><a href="dialogs.html">Dialogs</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="modals.html">Modals</a></li>
<li><a href="parallax.html">Parallax</a></li>
<li><a href="pushpin.html">Pushpin</a></li>
<li><a href="scrollfire.html">ScrollFire</a></li>
<li><a href="scrollspy.html">Scrollspy</a></li>
<li><a href="side-nav.html">SideNav</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="transitions.html">Transitions</a></li>
<li><a href="waves.html">Waves</a></li>
</ul>
</div>
</li>
</ul>