对齐按钮，在导航栏最右边

我不想把它作为列表项和调整的项目，与注销按钮，导航栏的最右边。

目前的情况：

HTML参与注销按钮的导航栏和CSS：

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

来源

2017-01-15 jane

它将工作！

#logout {浮动：右; }

来源

2017-01-15 19:18:53

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

来源

2017-01-15 18:39:22

你可以用float: right;做到在#logout并会送你正确

来源

2017-01-15 18:47:42

定义如下规则在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>

来源

2017-01-15 19:04:21

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

来源

2017-01-15 19:19:09 DEYANEMO

对齐按钮，在导航栏最右边

回答

相关问题