如何將響應菜單移至右側？

Question

我對使用this tutorial製作的響應菜單有疑問，實現起來相當簡單，我也將在此添加代碼。

如果你去my page here，你可以看到我在底部有一個5項目菜單。但我試圖讓它向右移動，我嘗試在導航中添加「float：right」到div，但它不起作用。

這裏是我的HTML

<div class="container" style="background:lightgray; padding: 15px"> 
    <h3> 5 menu left </h3> 
    <nav> 
    <ul> 
    <li><a class="current" href="#">PixelsDaily</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Clients</a></li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">Work2</a></li> 
    </ul>  
    </nav> 
</div> 

這裏是我的CSS

.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
} 

* { 
    padding: 0; 
    margin: 0; 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

nav { 
    width: 90%; 
    margin: 50px auto; 
} 

nav ul { 
    list-style: none; 
    /* overflow: hidden; */ 
} 

nav li a { 
    background: #444; 
    border-right: 1px solid #fff; 
    color: #fff; 
    display: block; 
    float: left; 
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    padding: 10px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 12.5%; 

     /*TRANSISTIONS*/ 
    -webkit-transition: background 0.5s ease; 
     -moz-transition: background 0.5s ease; 
     -o-transition: background 0.5s ease; 
     -ms-transition: background 0.5s ease; 
      transition: background 0.5s ease; 
} 


/*HOVER*/ 
nav li a:hover , nav li a.current{ 
    background: #222; 
} 

nav li a:visited { 
    color:#FFF; 
} 

nav li:last-child a { 
    border: none; 
} 

/*SMALL*/ 
nav small { 
    color: #aaa; 
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; 
    text-transform: none; 

} 

/* MEDIA QUERIES*/ 
@media only screen and (max-width : 1220px), 
only screen and (max-device-width : 1220px){ 
    nav li a { 
     font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    nav small { 
     font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; 
    } 
} 

@media only screen and (max-width : 930px), 
only screen and (max-device-width : 930px){ 
    nav li a { 
     width: 25%; 
     border-bottom: 1px solid #fff; 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    nav li:last-child a, nav li:nth-child(4) a { 
     border-right: none; 
    } 

    nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { 
     border-bottom: none; 
    } 
} 

@media only screen and (max-width : 580px), 
only screen and (max-device-width : 580px){ 
    nav li a { 
     width: 50%; 
     font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
     padding-top: 12px; 
     padding-bottom: 12px; 
    } 

    nav li:nth-child(even) a { 
     border-right: none; 
    } 

    nav li:nth-child(5) a, nav li:nth-child(6) a { 
     border-bottom: 1px solid #fff; 
    } 
} 

@media only screen and (max-width : 320px), 
only screen and (max-device-width : 320px){ 
    nav li a { 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 
} 

Answer 1

浮法您的A是正確的，而不是離開。

或者，切換到display: inline-block;設置，而不是使用浮動。

的jsfiddle：http://jsfiddle.net/LbApX/

HTML：

• 首頁
• 首頁
• 首頁
• 首頁
• 首頁

CSS： nav ul { text-align：right; }

nav ul li { 
    display: inline-block; 
}