Html菜单，右侧的最后一个按钮

Question

我为朋友创建简单的网站，但我不知道如何将最后的 li 元素对齐，当所有内容都被强制左侧时。 这是我实际拥有的，我试图添加自定义ID /类到最后李并试图浮动：正确但不起作用。我迷失了这么辛苦的

<div id="wrap">
    <div id="top">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Partners</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
    </ul>
    </div>

    #wrap{
    width: 1000px;
    margin: 0 auto;
    padding: 0;
}

#top{
    width:1000px;
    height:50px;
}

#menu ul{
    padding:0;
    list-style-type: none;
}

#menu li{
    float:left;
    list-style-type: none;
    padding-right: 50px;
    padding-top:0px;
    margin-left: -40px;


}
#menu li a{
    display: block;
    padding-left: 12px;
    padding-right:12px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color:#123e90;
    color: #fff;
    font-size: 12px;
    text-transform:uppercase;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-weight:bold;

}

#menu li a:hover{
    display: block;
    padding-left: 12px;
    padding-right:12px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color:#1c5cd2;
    color: #fff;
    font-size: 12px;
    text-transform:uppercase;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-weight:bold;

}

谢谢

Answer 1

使用last-child选项

＆＃13;

＆＃13;

#wrap {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
#top {
  width: 1000px;
  height: 50px;
}
#menu ul {
  padding: 0;
  list-style-type: none;
}
#menu li {
  float: left;
  list-style-type: none;
  padding-right: 50px;
  padding-top: 0px;
  margin-left: -40px;
}
#menu li:last-child {
  float: right;
}
#menu li a {
  display: block;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #123e90;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  font-weight: bold;
}
#menu li a:hover {
  display: block;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #1c5cd2;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  font-weight: bold;
}

＆＃13;

<div id="wrap">
  <div id="top">
    <ul id="menu">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Team</a>
      </li>
      <li><a href="#">Gallery</a>
      </li>
      <li><a href="#">Media</a>
      </li>
      <li><a href="#">Partners</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Login</a>
      </li>
    </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;