Materialize CSS-将导航栏最右侧对齐
Materialize CSS-将导航栏最右侧对齐
提问于 2018-07-15 03:58:51
我正在使用物化CSS，并已创建了一个导航，但想进一步向右移动一点，而不影响徽标的位置。见下图；
导航栏照片
我当前的代码：
< div class="navbar-fixed">
<nav class="white" role="navigation" id="top-nav">
<div class="nav-wrapper container">
<a id = "logo-container" href="#" class="brand-logo"><img src = "img/DataNavSmaller.png" ></ a >
< ul class="right hide-on-med-and-down">
<li><a href = "#" class="active">Home</a></li>
<li><a href = "#" > Who We Are</a></li>
<li><a href = "#" > What We Do</a></li>
<li><a href = "#" > Contact Us</a></li>
</ul>
<ul id = "nav-mobile" class="sidenav">
<li><a href = "#" > Navbar Link</a></li>
</ul>
<a href = "#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
</div>CSS：
nav.brand - logo {
margin - left: -60px;
padding - top: 4px;
}
nav.right {
padding - top: 10px;
}
nav ul a{
color: black;
font - size:20px;
}我怎样才能做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-15 05:42:12
您可以使用CSS属性position: fixed; top: 10px; right: 5px;设置导航栏的右侧。position: fixed使元素留在原地。top指定元素到top的距离，right指定元素到right的距离(这些属性仅在设置了display属性时有效)。
.navbar-fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #BEBEBE;
}
.logo{
margin: 10px 10px 10px 15px;
background: red;
padding: 5px;
background: linear-gradient(red, yellow, green);
width: 60px;
height: 25px;
color: white;
}
.navbar-right{
position: fixed;
top: 10px;
right: 5px;/*pixels away from the right of the navbar*/
}
.title{
display: inline-block;
margin: 5px;
}<div class="navbar-fixed">
<div class="logo">
<!--<img src="something.png" alt="img"/>-->
DataNav
</div>
<div class="navbar-right">
<div class="title">
Home
</div>
<div class="title">
Who we are
</div>
<div class="title">
What we do
</div>
<div class="title">
Contact us
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51342919
复制相关文章
相似问题
腾讯云开发者
