17

我有一个清单如下：

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

我附上了到目前为止我所做的事情的图像。

.

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

4

5 回答 5

29

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

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

演示

#menu > li:last-child
{
    float:right;
}
于 2013-05-07T17:56:18.590 回答
10

只需使用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>

你可以在这里查看演示。

于 2013-05-07T17:56:29.303 回答
5

除此之外，float您还可以position:absolute在position:relative容器内使用。（内联 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>
于 2013-05-07T17:59:25.357 回答
0

我有同样的问题，但对于整个列表。

Float 在那里不起作用，所以这对我有用：

ul{
  direction:rtl;
}

这样，您的所有 li 元素（包括它们的 ::marker）都将被拉到父容器的右侧。

您还可以将其与选择器结合使用，以仅移动单个 li 元素。

ul:first-child,
ul:nth-child(2),
ul:last-child{
  direction:rtl;
}
于 2022-02-22T17:48:01.763 回答
0

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

 <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>
于 2016-10-26T19:12:53.340 回答