所以我使用materialize
制作this 导航栏我的代码是:
<nav class="light-blue lighten-1 " role="navigation">
<div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>
<ul id="navbarUl" class="right hide-on-med-and-down">
<li class="active"><a href="#">Misiuni</a></li>
<li><a href="#">NewsFeed</a></li>
<li><a href="#">Clasament</a></li>
<li><a href="#"> </a></li>
<li id="navbarLi">
<div class="row">
<div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
<div class="col s6">Adyzds</div>
</div>
</li>
<li >
<div class="row">
<div class="col s4"><a href="#">Level:</a>
<span>Value</span>
</div>
<div class="col s4"><a href="#">XP:</a>
<span>Value</span>
</div>
</div>
</li>
</ul>
</div>
</nav>
我的鼠标在个人资料照片上。我希望悬停效果也能覆盖这个名字。另外,我希望Level值接近Level。 任何人都可以帮助我吗?
CSS:
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
#navbarImg{
padding-top: 10px;
max-width: 70px;
max-height: 64px;
}
#navbarLi{
max-height: 64px;
}
答案 0 :(得分:0)
您的列太窄了,不能达到Level:+ value。不要在内部创建包含2列的行,而是尝试为每个列使用单独的<li>
:
<li >
<a href="#">Level: <span>7</span> </a>
</li>
<li>
<a href="#">XP:<span>105</span> </a>
</li>
至于你的名字,只需将它嵌套在<a>
元素中,实体化将知道如何处理它。
看看这个小提琴:https://jsfiddle.net/pwxa6e80/3/ ...希望它有所帮助:)