在導航欄中將按鈕對齊到最右端

Question

如何將“注銷”移到選項卡的最右邊？

我不想將其作為列表項包括在內，並通過導航欄最右端的注銷按鈕對齊這些項。

當前場景：

涉及導航欄和注銷按鈕的CSS的html：

 #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

您可以使用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-->