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具有更高的特异性＆＃34;体重＆＃34;而不只是#logout。

因此，调整选择器以增加所需的重量＆＃34;。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用内联样式进行注销。

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

2 个答案:

这是一个特殊性问题