在导航栏中将按钮对齐到最右端

Question

How do I move the "logout" to the extreme right of the tabs ?

I dont want to include it as list item and align the items ,with logout button to the extreme right of the nav bar.

Current scenario :

html involved with the nav bar and css of logout button:

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

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

Answer 1

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

Answer 2

You can do it with float: right; In #logout and that will send you right

Answer 3

Define the following rules in the CSS

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

And adapt the HTML part as follow:

    <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

It will work!

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