简体   繁体   English

CSS 导航栏没有向右浮动

[英]CSS Nav Bar Not Floating Right

I need the last tab (About) to float to the right and the others to the left.我需要最后一个标签(关于)向右浮动,其他标签向左浮动。 It all floats left.这一切都向左浮动。

<div class="nav">
    <ul>
    <li><a href="/ghaines1/">HOME</a></li>
    <li><a href="/ghaines1/cosc231/">COSC 231</a></li>
    <li><a href="/ghaines1/cosc231/8ball.html">MAGIC 8 BALL</a></li>
    <li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li>
    </ul>
</div>

a {
color:#b7b7b7;
text-decoration:none;
}

body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}

#lines {
line-height:.3px;
}

hr {
width:30%;
}

#page {
text-align:left;
}

div {
margin:0 auto;
text-align:center;
}

img {
width:50%;
border:1px solid white;
}

.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}

.nav div {
width:100%;
position: fixed;
}

.nav ul {
 list-style-type: none;
 width:100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #dbdbdb;
 }

.nav li {
 float: left;
 }

 .nav li a {
 color: white;
  text-align: center;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
   -o-transition:.25s;
  -ms-transition:.25s;
  -moz-transition:.25s;
  -webkit-transition:.25s;
   transition:.25s;
  }

 .nav li a:hover {
  background-color: #efefef;
 }

.aboutRight {
position: fixed;
float: right;
left: 100px;
}

First of all have style for class aboutRight .aboutRight and your link has ID <li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li> .首先有 aboutRight .aboutRight类的样式,并且您的链接 ID <li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li> Rewrite id into class as it's a bad practice to use IDs for styling.将 id 重写为类,因为使用 ID 进行样式设置是一种不好的做法。

Second, you don't need position:fixed;其次,你不需要position:fixed; in this style, it won't take space in a parent container, you need this link to be in a same position as other links.在这种样式中,它不会占用父容器中的空间,您需要此链接与其他链接位于同一位置。

Third, you should apply that class not to the <a> tag, but to the <li> element, because you want to float right <li> inside of <ul> , not <a> inside of <li>第三,你应该不适用该类别的<a>标签,但对<li>元素,因为要浮动权<li>的内部<ul><a>的内部<li>

And lastly, since you have this rule .nav li { float: left; }最后,因为你有这个规则.nav li { float: left; } .nav li { float: left; } and want to override it for a certain li, you should write more specific selector, not just a class, eg nav li.aboutRight .nav li { float: left; }并要覆盖它一定里,你应该写更具体的选择,而不仅仅是一个类,如nav li.aboutRight

I created a snippet for you with working code.我用工作代码为你创建了一个片段。

 a { color:#b7b7b7; text-decoration:none; } body { background-color:#0d0d0d; font-family:Tahoma; color:#ffffff; text-align:center; margin:0; } #lines { line-height:.3px; } hr { width:30%; } #page { text-align:left; } div { margin:0 auto; text-align:center; } img { width:50%; border:1px solid white; } .nav { overflow: hidden; position: fixed; top: 0; width: 100%; } .nav div { width:100%; position: fixed; } .nav ul { list-style-type: none; width:100%; margin: 0; padding: 0; overflow: hidden; background-color: #dbdbdb; } .nav li { float: left; } .nav li a { color: white; text-align: center; display: block; padding: 12px 16px; text-decoration: none; -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s; transition:.25s; } .nav li a:hover { background-color: #efefef; } .nav li.aboutRight { float: right; left: 100px; }
 <div class="nav"> <ul> <li><a href="/ghaines1/">HOME</a></li> <li><a href="/ghaines1/cosc231/">COSC 231</a></li> <li><a href="/ghaines1/cosc231/8ball.html">MAGIC 8 BALL</a></li> <li class="aboutRight"><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li> </ul> </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM