ナビゲーションバーのボタンを右端に合わせる

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--> 
 
    \t <div class="container"> 
 
      <ul class="main-nav"> 
 
      \t <li><a href="#slider">Bulletin Board</a></li> 
 
       <li><a href="#service">Leaderboard</a></li> 
 
    \t \t \t \t \t \t <!-- 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> 
 
    \t \t \t \t \t \t <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

#logout {float:right;}を追加しよう

Answer 3

あなたは#logoutでfloat: right;でそれを行うことができ、それはCSSで

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

を以下のルールを定義し、次のようにHTMLの一部を適応させるあなたの右

Answer 4

をお送りします：

<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 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--> 
 
    \t <div class="container"> 
 
      <ul class="main-nav"> 
 
      \t <li><a href="#slider">Bulletin Board</a></li> 
 
       <li><a href="#service">Leaderboard</a></li> 
 
    \t \t \t \t \t \t <!-- 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> 
 
    \t \t \t \t \t \t <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-->