使用 CSS 3 使列表中的项目右对齐答案

【问题标题】：Make an item in list align to right using CSS 3使用 CSS 3 使列表中的项目右对齐
【发布时间】：2013-05-01 18:47:30
【问题描述】：

我有一个清单如下：

<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>

我附上一张到目前为止我所做的图片。

在此菜单中，我想将反馈对齐到右侧。我该怎么做？

【问题讨论】：

我已经从这个站点获取了这个样本：red-team-design.com/css3-dropdown-menu
刚刚向该示例添加了反馈选项。我希望它与右侧对齐
如果将float: right 添加到包含反馈的<li> 会怎样？

标签： html css css-selectors

【解决方案1】：

将此添加到您的 CSS 内容中。

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

Demo

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

【讨论】：

谢谢...！这非常有效......我通过编写 #menu:last-child{ float : right; 来尝试它。 } ，但这不起作用...你能说出两种风格之间的区别吗？
` #menu:last-child` 将尝试选择 ID 为 #menu 的最后一项，因此它不会按照您的意愿选择 last li。
此方法> 不适用于所有浏览器。 stackoverflow.com/questions/4459821/css-selector-what-is-it
如果不支持，仅适用于以下IE7..developer.mozilla.org/en-US/docs/CSS/Child_selectors
@user2091061 我建议你不要使用内联样式，而应该只使用 css 类...

【解决方案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>

您可以查看demo here。

【讨论】：

太棒了，拯救了我的一天 :) +1

【解决方案3】：

除了float，您还可以在position:relative 容器内使用position:absolute。（内联 CSS 仅用于示例目的。）

<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>

【讨论】：

【解决方案4】：

这会将整个菜单拉到右侧，并且下拉子菜单也会拉到右侧，而不是显示在屏幕外。

 <div class="top-menu">
    <ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
          <i class="icon-settings"></i>
          <i class="fa fa-angle-down"></i>
        </a>
       <ul class="dropdown-menu pull-right">
          <li>
            <a href="page_user_profile_1.html">
              <i class="icon-user"></i> My Profile
            </a>
         </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：