将按钮对齐到导航栏中的最右侧

Question

如何移动＆＃34;注销＆＃34;标签的最右边？

我不希望将其作为列表项包含并对齐项目，使用注销按钮到导航栏的最右侧。

当前情况：

html涉及导航栏和退出按钮的CSS：

＆＃13;

＆＃13;

#logout {
 background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
  width: 100px;
  cursor:pointer;
  border-radius:50px;
  padding:10px 20px 10px 0;
  color:White;
  font-size:14px;
  text-align:left;
  text-indent:40px;
  display:block;
  margin:0 auto;
  display: inline-block;

  /* Animations: */
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-duration: .4s;
  -webkit-transition-property: all;

  -moz-transition-timing-function: ease-in-out;
  -moz-transition-duration: .4s;
  -moz-transition-property: all;
}

#logout:hover {
  background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
  background-position: 65px 5px;
  text-indent: 15px;
}

＆＃13;

<nav class="main-nav-outer" id="test"><!--main-nav-start-->
    	<div class="container">
            <ul class="main-nav">
            	<li><a href="#slider">Bulletin Board</a></li>
                <li><a href="#service">Leaderboard</a></li>
    						<!-- changed the name of tyhe services here -->
                <li><a href="#Portfolio">Badges</a></li>
                <li class="small-logo"><a href="#header"><img src="img/small-logo.png" alt=""></a></li>
                <li><a href="#team">Medals</a></li>
    						<li><a href="#client">Statistics</a></li>
                <li><a href="#contact">Contact</a></li>
                
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
            <a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
        </div>
    </nav><!--main-nav-end-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加#logout {float:right;}

Answer 2

您可以使用float: right;在#logout中执行此操作，这样会向您发送

Answer 3

在CSS中定义以下规则

.main-nav{
    float:left;
}
#right {
    float: right;
}

并调整HTML部分如下：

    <div id="right">
        <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        <a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
    </div>

Answer 4

它会起作用！

#logout {float：right; }

Answer 5

#logout {
 background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
  width: 100px;
  cursor:pointer;
  border-radius:50px;
  padding:10px 20px 10px 0;
  color:White;
  font-size:14px;
  text-align:left;
  text-indent:40px;
  /*display:block; */
  margin:0 auto;
  display: inline-block;
  /* add This Code */
 position: absolute;
 right:0;
 top: 0;
  /* Animations: */
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-duration: .4s;
  -webkit-transition-property: all;

  -moz-transition-timing-function: ease-in-out;
  -moz-transition-duration: .4s;
  -moz-transition-property: all;
}

#logout:hover {
  background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
  background-position: 65px 5px;
  text-indent: 15px;
}

<nav class="main-nav-outer" id="test"><!--main-nav-start-->
    	<div class="container">
            <ul class="main-nav">
            	<li><a href="#slider">Bulletin Board</a></li>
                <li><a href="#service">Leaderboard</a></li>
    						<!-- changed the name of tyhe services here -->
                <li><a href="#Portfolio">Badges</a></li>
                <li class="small-logo"><a href="#header"><img src="img/small-logo.png" alt=""></a></li>
                <li><a href="#team">Medals</a></li>
    						<li><a href="#client">Statistics</a></li>
                <li><a href="#contact">Contact</a></li>
                
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
            <a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
        </div>
    </nav><!--main-nav-end-->