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>

我想将最后一个li项目移到左侧。然后它看起来像这张照片 enter image description here

我需要SALES和MY ACCOUNT之间的空格请帮帮我。提前谢谢

Answer 1

尝试添加此内容：

.menu li.last {
    float:right;
}

你的代码中有正确的CSS（.last），但你需要赋予它更多权限，因为它被#menu li代码覆盖。因此，在您的上一次声明中，将其更改为“.menu li.last”而不是“.last”

Answer 2

试试这个

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

Answer 3

试试这个：

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

Answer 4

试一下

.menu li.last {
    float:right;
}

或

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

导航菜单项间距需要解决

4 个答案: