使用CSS3使列表中的项目对齐

Question

我有一个列表如下:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Feedback</a></li>
</ul>

我附上了迄今为止所做的事情.

在此菜单中,我想将反馈与右侧对齐.任何人都可以告诉你该怎么做？

Answer 1

将此添加到您的Css.

li:last-child将选择最后一个li菜单列表.

演示

#menu > li:last-child
{
    float:right;
}

Answer 2

只需使用float: right;:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li style="float: right;"><a href="#">Feedback</a></li>
</ul>

你可以在这里查看演示.

Answer 3

除此之外，您还可以在容器内部float使用。（内联 CSS 仅用于示例目的。）position:absoluteposition:relative

<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
 <li class="right" style="position:absolute;right:20px;">
    <a href="#">Feedback</a></li>