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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16425420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:11:12  来源:igfitidea点击:

Make an item in list align to right using CSS3

htmlcsscss-selectors

提问by user2091061

I have a list as follows :

我有一个列表如下:

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

I am attaching image of so far what i have done..

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

In this menu,I want to align feedback to right side. Can anyone tell how to do it?

在这个菜单中,我想将反馈对齐到右侧。谁能告诉怎么做?

回答by PSL

Add this to your Css.

将此添加到您的 CSS。

li:last-childwill select the last liof the menu list.

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

Demo

演示

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

回答by Minko Gechev

Just use float: right;:

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

You can check the demo here.

您可以在此处查看演示

回答by Absolute?ER?

Aside from floatyou can also use position:absoluteinside of a position:relativecontainer. (Inline css for example purposes only.)

除此之外,float您还可以position:absoluteposition: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>

回答by JoshYates1980

This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.

这会将整个菜单拉到右边,下拉子菜单也拉到右边,而不是显示在屏幕外。

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