如何在导航栏右侧浮动 link？

Question

我想创建一个 "Log Out" link 浮动到导航栏的最右侧。我有这个 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>

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

#logout {
  float: right;
}

但是如您所见，link 紧挨着其他项目 - https://jsfiddle.net/7q416t2d/ 排成一行。如何让 link 位于导航的最右侧？

Answer 1

#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>

使用内联样式进行注销。

Answer 2

这是一个特异性问题

#navigation ul li 比 #logout.

具有更高的特异性 "weight"

相应地，调整您的选择器以增加所需的 "weight"。

#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>

如何在导航栏右侧浮动 link？

How do I float a link at the right of my nav?

html

css

css-float

nav

这是一个特异性问题