CSS 导航栏未向右浮动答案

【问题标题】：CSS Nav Bar Not Floating RightCSS 导航栏未向右浮动
【发布时间】：2019-03-05 04:27:45
【问题描述】：

我需要最后一个选项卡（关于）向右浮动，其他选项卡向左浮动。它都向左浮动。

<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;
}

【问题讨论】：

不要在你的问题中添加垃圾。这引起了危险信号（垃圾邮件/粗鲁/辱骂），并且很容易对您的帐户造成严重处罚。这次我把它编辑掉了。质量过滤器的存在是有原因的。你最好听听它的建议，并在你的问题中增加上下文/细节的数量，而不是添加漫无边际的废话。

标签： html css alignment

【解决方案1】：

首先要有类 aboutRight .aboutRight 的样式，并且您的链接的 ID 为 <li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li>。将 id 重写到类中，因为使用 ID 进行样式设置是一种不好的做法。

其次，这种样式不需要position:fixed;，它不会占用父容器中的空间，您需要此链接与其他链接处于相同位置。

第三，您应该将该类应用到 <a> 标记而不是 <li> 元素上，因为您希望在 <ul> 内向右浮动 <li>，而不是在 <li> 内浮动 <a>

最后，既然你有这条规则 .nav li { float: left; } 并且想为某个 li 覆盖它，你应该编写更具体的选择器，而不仅仅是一个类，例如nav li.aboutRight

我用工作代码为你创建了一个 sn-p。

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>

【讨论】：