如何在导航右侧浮动链接？

Question

我想创建一个“注销”链接，该链接浮动在我的导航的最右边。 我有这个HTML

<nav id="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Member Currencies</a></li>
    <li><a href="/user_notifications/" id="notifications">My Notifications</a></li>
<li id="logout"><a href="/logout">Log Out</a></li>
  </ul>
</nav>

并将其添加到我的注销链接样式中...

#logout {
  float: right;
}

但是正如您所看到的，该链接正排在其他项旁边，即https://jsfiddle.net/7q416t2d/ 。 如何获取链接在导航的最右边？

Answer 1

这是一个特异性问题

#navigation ul li比#logout具有更大的特异性“权重”。

相应地，调整选择器以增加所需的“重量”。

#navigation ul li#logout {
  float: right;
}

 /* line 27, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #w { display: block; width: 100%; padding: 14px 15px; margin: 0 auto; margin-top: 45px; } /* line 35, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #content { display: block; background: #fff; padding: 14px 20px; text-align: center; } /* line 42, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #logo { display: block; border: 1px solid #232323; border-bottom-width: 0; font-family: 'chicagoflfregular'; font-size: 20px; color: #ffffff; } /* line 51, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #logobg { display: block; width: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* top navigation */ /* line 60, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation { display: block; height: 35px; background-color: #131313; background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#131313)); background-image: -webkit-linear-gradient(top, #202020, #131313); background-image: -moz-linear-gradient(top, #202020, #131313); background-image: -ms-linear-gradient(top, #202020, #131313); background-image: -o-linear-gradient(top, #202020, #131313); background-image: linear-gradient(top, #202020, #131313); } /* line 72, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul { list-style: none; padding: 0px 7px; } /* line 74, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li { display: inline; float: left; } /* line 75, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li a { display: block; padding: 0 8px; color: #fff; font-size: 1.1em; text-decoration: none; line-height: 35px; font-weight: bold; margin-right: 6px; text-shadow: 1px 1px 1px #000; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } /* line 89, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li a:hover { color: #a8d6e7; } /* line 77, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/application.css.scss */ #navigation ul li#logout { float: right; } 

 <div id="w"> <nav id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Member Currencies</a></li> <li><a href="/user_notifications/" id="notifications">My Notifications</a></li> <li id="logout"><a href="/logout">Log Out</a></li> </ul> </nav> </div> 

Answer 2

 #navigation { display: block; height: 35px; background-color: #131313; background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#131313)); background-image: -webkit-linear-gradient(top, #202020, #131313); background-image: -moz-linear-gradient(top, #202020, #131313); background-image: -ms-linear-gradient(top, #202020, #131313); background-image: -o-linear-gradient(top, #202020, #131313); background-image: linear-gradient(top, #202020, #131313); } /* line 72, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul { list-style: none; padding: 0px 7px; } /* line 74, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li { display: inline; float: left; } /* line 75, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li a { display: block; padding: 0 8px; color: #fff; font-size: 1.1em; text-decoration: none; line-height: 35px; font-weight: bold; margin-right: 6px; text-shadow: 1px 1px 1px #000; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } /* line 89, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/custom.scss */ #navigation ul li a:hover { color: #a8d6e7; } 

 <nav id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Member Currencies</a></li> <li><a href="/user_notifications/" id="notifications">My Notifications</a></li> <li style="float:right"><a href="/logout">Log Out</a></li> </ul> </nav> 

使用内联样式进行注销。