导航菜单项间距需要解决

Question

我设计了一个菜单。 HTML代码给

<div class="navi"> 
    <ul class="menu"> 
     <li class="current_page_item"><a href="#" title="Women">Women</a></li> 
     <li><a href="#">Men</a></li> 
     <li><a href="#">Junior</a></li> 
     <li><a href="#">Accessories</a></li> 
     <li><a href="#">Collections</a> 
     <ul class='children'> 
      <li><a href="#" style="background-image:none;">Year</a></li> 
      <li><a href="#">2014</a> 
       <ul class='children'> 
        <li><a href="#" style="background-image:none;">SUMMER</a></li> 
        <li><a href="#" style="background-image:none;">AUTUMN</a></li> 
        <li><a href="#" style="background-image:none;">WINTER</a></li> 
        <li><a href="#" style="background-image:none;">SPRING</a></li> 

       </ul> 
      </li> 
      <li><a href="">2013</a></li> 
     </ul> 
     </li> 
     <li><a href="">Sale</a></li> 

     <li class="last"><a href='#'>MY ACCOUNT</a> 
     </li> 
    </ul> 
    <br style="clear:both;" /> 
</div> 

的CSS是给波纹管

.navi { 
    width:1000px; 
    margin:0 auto; 
    border-bottom:5px solid #000; 
    height:50px; 
} 

.menu { 
    width:1000px; 
    margin:0 auto; 
} 
.menu, .menu ul { 
    display: block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.menu li { 
    border: 0 none; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    z-index: 5; 
} 
.menu li:hover { 
    white-space: normal; 
    z-index: 10000; 
} 
.menu li li { 
    float: none; 
} 
.menu ul { 
    left: 0; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    z-index: 10; 
} 
.menu li:hover > ul { 
    top: 100%; 
    visibility: visible; 
} 
.menu li li:hover > ul { 
    left: 100%; 
    top: 0; 
} 
.menu:after, .menu ul:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
} 
.menu, .menu ul { 
    min-height: 0; 
} 
.menu ul { 
    margin: -10px 0 0 -30px; 
    padding: 10px 30px 30px; 
} 
.menu ul ul { 
    margin: -30px 0 0 -10px; 
    padding: 30px 30px 30px 10px; 
} 
.menu ul li a:hover, .menu li li a:hover { 
    color: #484848; 
    text-decoration: none; 
} 
.menu ul { 
    min-width: 15em; 
    width: auto;  
} 
.menu a.arrow 
{ 
    background: url(arrow.gif) no-repeat right center; 
} 
.menu ul a.arrow 
{ 
    background: url(right.gif) no-repeat 97% center; 
} 
.menu .menuRight 
{ 
    float: right; 
    margin-right: 0px; 
} 

.menu a { 
    font-family:Harvest; 
    color: #314350; 
    display: block; 
    height:55px; 
    line-height:55px; 
    margin: 0 0px 0 0; 
    padding: 0 1em; 
    position: relative; 
    text-decoration: none; 
    font-size:18px; 

} 
.menu a:hover { 
    background-color: #1c2b36; 
    color: #ffffff; 
    box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0; 
} 
.menu .current_page_item a { 
    background-color:#1c2b36; 
    color: #ffffff; 
    box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0; 
} 
.menu li li { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: -moz-use-text-color #B2B2B2 #B2B2B2; 
    border-image: none; 
    border-right: 1px solid #B2B2B2; 
    border-style: none solid solid; 
    border-width: medium 1px 1px; 
    color: #444444; 
    filter: none; 
    width: auto; 
} 
.menu li li a { 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    border: medium none; 
    color: #444444; 
    font-size: 12px; 
    font-weight: 400; 
    height: 20px; 
    line-height: 20px; 
    padding: 5px 10px; 
    text-shadow: none; 
    white-space: nowrap; 
} 
.menu li li a:hover { 
    background:#E5E4E4; 
    border: medium none; 
    color: #333; 
    filter: none; 
} 
.menu ul > li + li { 
    border-top: 0 none; 
} 
.menu li li:hover > ul { 
    left: 100%; 
    top: 0; 
} 
.menu > li:first-child > a { 
    border-left: medium none; 
} 
.menu > li:first-child > a, .menu li + li + li li:first-child > a { 
} 
.menu ul.children a, .menu .current_page_ancestor, .menu .current_page_ancestor ul a { 
    background: none; 
    filter: none; 

} 
.menu ul.children a{background:url(images/arrow.png) no-repeat 93% 70%;} 
.menu ul.children a:hover{background:url(images/arrow.png) no-repeat 93% 70% #999;} 
ul.sub-menu .current_page_item a { 
    background:none; 
} 





.footer-box-last { 
    width:420px; 
    float:left; 
    background:#b6c2c9; 
    height:150px; 
} 
.footer_outer { 
    background:url(mail-icon.png) repeat:none; 
    width:400px; 
    border-radius:5px; 
    margin:5px; 
    background-color:#fff; 

} 
.footer-box-last h2 { 
    color:#e8ecee; 
    font-size:20px; 
    font-weight:lighter; 
    margin:15px 15px 15px 7px; 
} 
.footer-box-last label { 
    color:#9B9B9A; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 

} 
.icon { 
    width:20px; 
    height:30px; 
    float:left; 
    margin:11px 0 0 5px; 
} 
.field-2 { 
    border: medium none; 
    width:220px; 
    height:30px; 
    border-radius:5px; 
    border:none; 
    color:#4c565f; 
    margin:5px; 
} 
.form_btn { 
    background-color:#3bc0c3; 
    color:#ffffff; 
    float:right; 
    border-radius:5px; 
    height:34px; 
    width:120px; 
    border:none; 
    margin:4px; 

} 

.last { 
    float:right; 
    padding-left:60px; 
    font-style:italic; 
} 



     </style> 

我想最后李项移动到左边。那么它会看起来像这样n图片

我需要一个销售额和我的帐户之间的空间 请帮我在这。 预先感谢您

Answer 1

尝试这个

.menu li.last { 
    float:right; 
} 

或

.menu li:last-child { 
    float:right; 
} 

Answer 2

尝试添加此：

.menu li.last { 
    float:right; 
} 

你必须在你的代码（。去年）右CSS，但你需要给它更多的权力，因为它是由#menu李覆盖码。所以，在你的最后声明中更改它，而不是 “去年”

Answer 3

为 “菜单li.last” 试试这个

.menu li:last-child { 
    float:right; 
} 

Answer 4

试试这个：

.last{ 
    position: relative; 
    left: -50px; 
}